使用chrome扩展往浏览器中导入本地js脚本(制作一个简单的谷歌浏览器插件)

CrazyMing 2019-10-11
0条评论 91 次浏览
CrazyMing 2019-10-110条评论 91 次浏览

一般要在网页中插入js的话直接打开控制台写js就行,但是要插入大量的js,或者要在很多网站上运行本地脚本。就需要频繁打开控制台。chrome的扩展程序可以方便的帮我们插入js脚本。

制作一个简易的 chrome扩展 很简单,推荐查阅360极速浏览器的文档(和谷歌浏览器一样的),http://open.chrome.360.cn/extension_dev/manifest.html#manifest_version

第一步:新建一个文件夹,接下来的操作都在该文件夹内进行。
第二步:新建一个json文件:manifest.json,在里边加入以下代码:

{
  "name": "测试",
  "manifest_version": 2,
  "version": "1.0",
  "description": "运行一个脚本",
  "browser_action": {
    "default_icon": "1.png"
  },
  "content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "test.js"
      ]
    }
  ]
}

其中:
manifest_version表示manifest文件自身格式的版本号。从Chrome 18开始,开发者应该(不是必须,但是2012年底左右就必须了)指定版本号为2(没有引号)。

default_icon是扩展程序的图标 随便找张png图片放入文件夹内重命名为1.png就可以。

content_scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM,它们可以获取浏览器所访问页面的详细信息,并可以修改这些信息。参考文档:http://open.chrome.360.cn/extension_dev/content_scripts.html

matches: 定义哪些页面需要注入content script。上方的例子中*://*/* 表示匹配所有网页。如果要指定网页,可以这么写:http://www.xx.com/ 具体匹配规则参考:http://open.chrome.360.cn/extension_dev/match_patterns.html

js: 需要向页面中注入的javascript文件,按定义顺序注入。

上方例子中 引入了test.js ,把test.js放入文件夹内就可以了。
test.js中我写入了以下代码:

document.body.style.backgroundColor="#5d5d5d";

这样,安装扩展后,打开的网页背景色就都是#5d5d5d了。

安装扩展程序的方法:
点击 谷歌浏览器的菜单:更多->扩展程序 然后打开开发者模式,点击 加载已解压的扩展程序,在弹出的资源管理器中选择前面创建的文件夹就可以了。

现在,打开谷歌页面 可以发现背景色已经被改成我们定义的灰色(#5d5d5d)了

3+

发表评论

电子邮件地址不会被公开。

隐藏
变装