一个简单的chrome拓展程序开发-白红宇

一个简单的chrome拓展程序开发

阅读量：5838 次

发布时间：2019-06-18

本文共 2732 字，大约阅读时间需要 9 分钟。

最近突然觉得有些常用的功能可以写成浏览器插件，就不用把代码放到console控制台运行了。只要点击插件图标就可以自动运行。会方便很多。就去查了下chrome插件开发教程。本质上讲，chrome插件就是以一些特殊的方式运行一些特定的html,css,JavaScript代码，前端同学们学起来还是很容易的。

比较好的中文的参考资料：

1.360翻译的文档：

2.Chrome扩展及应用开发：

我们做一个简单的插件：实现点击插件图标可以给页面上所有的a标签加上一个target="_blank"，让点所有链接都在新页面打开。

我们开发的应用这样使用：

1.建立一个文件夹。a chrome plugin。

2.新建配置文件　manifest.json。前端同学们对于这样的配置文件一定不陌生。

里同包含了版本号，插件名称，默认页面，content_scripts，permissions等基本信息。

这个文件能将我们插件中的的js，css,JavaScript文件组织起来。

具体每个参数的含义见文档：

代码：

{    "manifest_version": 2,    "name": "A",    "version": "1.0",    "description": "新标签打开链接",    "browser_action": {        "default_popup": "popup.html"    },    "content_scripts":[        {            "matches": ["http://*/*","https://*/*"],            "js": ["back.js"],            "run_at":"document_end"        }    ],    "permissions": [        "tabs"    ]}

3.建立文件。popup.html。

对应配置文件中的 "default_popup": "popup.html"。

点图标的时候我们会加载运行这个html，运行这个html引入的js。

这是一个普通的html页面。里面可以写css。也可以加载JavaScript文件。也可以给里面的节点添加事件什么的。

不过这个文件以及加载的js无法访问当前我们打开的标签页中的dom节点。

代码：

    
        这是popup.html里面。

这里只用来加载一个js。

4.popup.js。　popup.html引入的js。这里我们用户它的做的事是向content_scripts中发送一个消息。相当于发一个命令。告诉content script，去办事吧。content_scripts的内容在后面，看完再回过来看一次这里。

chrome.tabs.getSelected(null, function(tab) {        chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {            // console.log(response.farewell);        });    });

chrome.tabs.getSelected()这个函数能获取到当前标签的信息对象并传递给回调函数。　

获取到tabId就是tab.id。可以自己console.log(tab)出来看一下。文章后面有对应调试控制台的打开方式。tab相关的接口可以查看：　很多接口都要用到这个参数：tabId ( integer )，其实就是用这个接口拿到tabId。

chrome.tabs.sendRequest()这个函数是向某个标签的content_script中发送一个消息。也需要tabId这个参数。chrome插件之间的通信接口可查看：

5.back.js。也是我们这个插件中的content script。

这个文件是我们插入到当前标签页中运行的代码。它可以访问标签页面中的dom节点。

我们这里用它来是监听消息，消息来了就运行设置标签的函数。操作标签页中的dom节点。

对应配置文件中content_scripts下的back.js。

这个参数中的内容会被加载到当前打开的网页中，可以访问当前标签页的节点。

所以，我们对页面的操作往往会写在这个脚本里。有需要的话甚至可以加载个jQuery到里面。

但是这里的JavaScript与网页上原本的JavaScript不是一个环境下运行。具体区别可以自己去看开发文档。

代码：

function setA(){    var aDoms = document.getElementsByTagName('a');    var len = aDoms.length;    for (var i = 0; i < len; i++) {        aDoms[i].setAttribute("target","_blank")    }}chrome.extension.onRequest.addListener(    function(request, sender, sendResponse) {        if (request.greeting == "hello"){            setA();            // sendResponse({farewell: "goodbye"});        }else{              // sendResponse({});          }      }      );

可能比较要注意的一点是popup.html与content_script之间的通信。

popup.html向标签页中的content_script发送消息。

content_script接收到消息，执行操作。

6.调试方式：

popup.html加载的js调试。

右键点击插件图标，选择审查弹出内容。（或者在弹出框里右键点击检查。）会弹出一个控制台。

点source可以看到我们的html和js资源。