首页 > 其他分享 >chrome插件脚本background_script和content_script

chrome插件脚本background_script和content_script

时间:2023-05-25 16:47:34浏览次数:42  
标签:插件 http script chrome js content background

Chrome 在一次更新之后,出于安全考虑,完全的禁止了 content_script 从 https 向 http 发起 ajax 请求,即使正常情况下也会在 console 里给出提示。这对于 Web 来讲是好事,但对于扩展来讲就是坏事。平时可以很容易的请求数据,现在就没那么容易了。好在 chrome 还提供了 background_script,利用 content_script 和 background_script 之前的通信来实现 ajax 的请求,就跳过了 chrome 的这一限制。

content_script
从名字里就知道,content_script 是植入型的,它会被植入到符合匹配的网站页面上。在页面加载完成后执行。content_script 最有用的地方是操作网站页面上的DOM。一切平时做前端的一些操作它都可以做,像什么添加、修改、删除 DOM,获取 DOM 值,监听事件等等,都可以很容易的做到。所以,如果想获取人家的登录帐户和密码,就是件非常容易的事,只需要添加content_script,监听帐户和密码的文本框,获得值后将数据发送到自己的服务器就可以了。因此,特别说明,别乱装扩展,特别是不从官方扩展库里下载的扩展。

使用 content_script
要使用 content_script,需要在 manifest.json 中配置,如下:

{ "manifest_version": 2, "name": "My Extension", "description": "Extension description", "version": "1.0", "content_scripts": { "js": [ "content.js" ] }}
这样,在页面加载完成后,就会加载 content.js,在 content.js 里,就可以控制页面元素。如果要在 content.js 中使用 jquery,需要将 jquery 文件加到 content.js 前面,如:

content_script 使用 jquery
{ "content_scripts": { "js": [ "jquery.js", "content.js" ] }}
除了可以加载js,content_scripts 里还可以加载 CSS 文件,这样可以让你的扩展漂亮一点,如:

content_script 使用 CSS
{ "content_scripts": { "js": [ "content.js" ], "css": ["style.css"] }}
在 content_scripts 中,还有一项重要的设置就是matches,它是用来配置,符合扩展使用的网址,如:我只想这个扩展在打开www.jgb.cn时才启用,那么 matches 就要这样写:

设置匹配网站
{ "content_scripts": { "js": [ "content.js" ], "css": ["style.css"] }, "matches": [ "http://.jgb.cn/" ]}
如果还要匹配 www.amazon.com,那就加上:

{ "matches": [ "http://.jgb.cn/", "http://.amazon.com/" ]}
注意,http 只适用于 http,像 amazon.com 这样的站即有 http 也有 https,所以得把 https 也加上,如下:

{ "matches": [ "http://.jgb.cn/", "http://.amazon.com/", "https://.amazon.com/" ]}
background_script
它在 chrome 扩展启动的时候就启动了,做着它的事,而且等待着你给他的指令。它没办法控制页面元素,但可以通过 content_script 告诉它。ajax同理,如果要在页面打开时向别的服务器请求数据,这时就可以告诉 background_script,让它去请求,然后把返回的数据发送给 content_script。这样就不会受到浏览器的安全限制影响。

使用 background_script
要使用 background_script,需要在 manifest.json 中配置,如下:

{ "manifest_version": 2, "name": "My Extension", "description": "Extension description", "version": "1.0", "background": { "scripts": [ "background.js" ] }}
使用 jquery 和 content_scripts 同理,需要把 jquery 文件加到 background.js 前面,如:

在 background_script 中使用 jquery
{ "background": { "scripts": [ "jquery.js", "background.js" ] }}
跨域
默认情况下 Ajax 是不允许跨域的,但扩展提供了跨域的配置,在前一篇《基础介绍》中提到过,那就是 permissions,它除了可以让扩展使用 chrome 的一些功能外,还可以允许JS实现对目录网站的跨域访问,如:

{ "permissions": [ "http://www.jgb.cn/" // 允许跨域访问www.jgb.cn ]}
有了以上的配置,这时候就可以来看看怎样通过 background_scripts 来实现 Ajax 请求了。

向 background 发送请求
在 content_script 中向 background_script 发送请求有好几种方式,这里只列出我常的一种,应该来讲,能满足大多数情况的使用,其它方法,请查询文档,方法如下:

chrome.extension.sendMessage({}, callBack);
sendMessage()方法,它有两个参数,第一个要发送的数据,就像 post 请求一样,第二个是回调函数。如在 content_script 中,点击一个按钮,将一个字符串发送到 background_script

$(function(){ $("#button").click(function(){ chrome.extension.sendMessage({'txt': '这里是发送的内容'}, function(d){ console.log(d); // 将返回信息打印到控制台里 }); });})
在 background 中监听 content 请求
在 background 中监听 content 请求,使用 chrome.extension.onMessage.addListener(),示例如下:

chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){});
objRequest,即为请求的参数,在上一个例子就是 {'txt': '这里是发送的内容'},可以通过 objRequest.txt 来获取内容。其实就是一个字典。

sendResponse,为返回值方法,可以将数据返回给 content_script,那么一个简单的例子就是:

chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){ var strText = objRequest.txt; // 将信息能过Ajax发送到服务器 $.ajax({ url: 'http://www.jgb.cn/', type: 'POST', data: {'txt': strText}, dataType: 'json', }).then(function(){ // 将正确信息返回content_script sendResponse({'status': 200}); }, function(){ // 将错误信息返回content_script sendResponse({'status': 500}); });});
这样一去一来,也就实现 content_script 向 background_script 发送请求,并使用 background_script 执行 ajax 请求的目的,非常的简单好用

在此基础上,增加一些条件和数据,就可以很好的实现接收,发送数据的操作。比如向自己的服务器请求或发送数据。

通过修改 chrome 启动参数,实现可在 https 页面向 http 页面发起 ajax 请求
除了使用 background_script 来发起 Ajax 请求外,还可以通过修改 chrome 的启动参数来达到这个目的。参数为:--allow-running-insecure-content,操作方法:

右键 chrome 快捷方式,选择属性
在目标的最后,输入 --allow-running-insecure-content,中间有个空格
这样 chrome 就可以允许你在 https 页面向 http 发起 ajax 请求了。这个方法可以达到目的,但不推荐,因为不科学。

标签:插件,http,script,chrome,js,content,background
From: https://www.cnblogs.com/bjguanmu/p/17431761.html

相关文章

  • javascript prototype and class
    js中的prototype绝对是js的一个重要知识点,有点像delegate的模式,和oop对象形式还是有些差别的,尽管可以做同样的事情。简要学习可以参见:https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes关于js的class和java的语法很像,参见:https://develope......
  • Firefox8.0.1及对应firebug1.9.0,firepath0.9.7.1.1插件下载
    firefox8.0.1链接:https://pan.baidu.com/s/1x9M6dimmvQrBee_iSeVcZg提取码:ewy8旧版本安装注意,安装前必看:firefox旧版本下载后打开为为最新版怎么办firebug1.9.0链接:https://pan.baidu.com/s/1g55zj8BjciR4U3Mn1ApqFQ提取码:zfj3firepath0.9.7.1.1链接:https://pan.baidu.com/s/......
  • 碎片化学习前端之JavaScript(for...in 和 Object.keys() 的区别)
    前言JavaScript中遍历对象的方式主要有:for...in和Object.keys()两种方式。for...inletobj={name:'ming',age:18,}obj[Symbol('hello')]='world'obj.__proto__={gender:'man',job:'font-end'}f......
  • 一篇文章解密 - 如何在MyEclipse中使用JavaScript编写代码?
    MyEclipsev2022.1.0正式版下载MyEclipse技术交流群:742336981欢迎一起进群讨论JavaScript项目在MyEclipse2021及更高版本中,JavaScript支持对大多数JavaScript源代码都是开箱即用的——不需要特殊的JavaScriptEclipse项目或JavaScriptfacet。但是,我们建议使用jscon......
  • 360安全浏览器、Chrome浏览器 添加广告拦截插件的办法
    HI,浏览器的伙伴们:根据新的广告法、不正当竞争法等法律,法院判决:浏览器拦截视频等网站的广告,属于不正当竞争的违法行为。被告方要赔钱,还要取消侵权行为。如果浏览器厂商继续上线这类扩展,最终法院的判决:浏览器厂商被罚钱、被法院要求下线扩展,严重的情况,浏览器直接破产。所以,因为法......
  • wordpress插件:用YARPP显示相关文章(wordpress 6.2)
    一,安装插件:插件->安装插件->搜索:RelatedPosts安装后可以进行配置二,测试效果说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest     对应的源码可以访问这里获取: https://github.com/liuhongdi/     或: https:......
  • 页面中调用swf 时allowScriptAccess 参数
    <paramname="allowScriptAccess"value="always"/>使用allowScriptAccess使Flash应用程序可与其所在的HTML页通信。此参数是必需的,因为fscommand()和getURL()操作可能导致JavaScript使用HTML页的权限,而该权限可能与Flash应用程序的权限不同。这与跨域安全性有......
  • 09_TypeScript 函数
    09_TypeScript函数函数是一组一起执行一个任务的语句。您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的。函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主......
  • 【IntelliJ IDEA】idea中的插件之一:Free Mybatis plugin跳转插件的使用(方便在Dao接口
    本文目录一、安装二、使用最近在使用一个非常好用的跳转插件,用着很顺手,效率比之前提高了很多。之前使用MyBatis框架或者是在IDEA中,发现Mapper接口和XML文件之间跳转十分的麻烦,我之前经常的操作是在Mapper接口中将接口名称复制一下,然后去查找对应的XML文件,打开后CRTL+F查找对应的xml......
  • 【JavaScript用法】JavaScript(JS)的基本语法(JS数据类型,JS变量,JS运算符,JS流程控制语句
    JavaScript(JS)的基本语法目录JavaScript(JS)的基本语法一.与html结合方式二.注释三.数据类型:四.变量五.运算符(和Java有点类似)六.流程控制语句(和JAVA 类似):七.JS特殊语法:一.与html结合方式       1.内部JS:定义<script>,标签体内容就是js代码(可以理解为和html......