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

今天教大家来做一个Chrome 扩展，学会这项技能你就可以开发很多工具来提高你使用浏览器的效率了。

我们先通过做一个最简单的Chrome 插件来学习如何制作Chrome扩展，我们先来实现点击浏览器按钮显示 “Hello , Chrome” 。

首先创建 一个目录 Hello

在 Hello 目录里创建如下几个文件manifest.json,popup.html, icon.png

manifest.json 内容如下:

{    "name": "HelloChrome",    "version": "1.0.0",    "manifest_version": 2,    "description": "对我说 Hello，Chrome",    "browser_action": {        "default_title": "say",        "default_icon":"icon.png",        "default_popup": "popup.html"    }}

popup.html 内容如下:

    
           
Hello, Chrome

icon.png 是一个 19*19 像素的图标，你可以网上下载一个，或者用我这个。

先简单介绍下 manifest.json, manifest.json 是Chrome 扩展中最重要的一个文件，它是整个扩展的入口和说明文件。

下面介绍下参数：

name 就是你的扩展名称啦version 你的扩展的版本manifest_version manifest 的版本 填 “2” 就行了description 对你扩展的简单描述browser_action 定义你的扩展在浏览器上的操作按钮，icon.png 就是按钮图标,popup.html就是当你点击按钮时弹出的页面框，可以在里面写自己的界面包括逻辑代码。

好了这个简单的扩展一共就三个文件，我们现在把它安装到 Chrome 中,

打开菜单> 更多工具>扩展程序

我们开启了Chrome扩展的开发者模式，然后加载了 Hello 目录进去，这时候，看我们浏览器的右上角，就会出现一个图标

对应我们在 manifest.json 里设置的 browser_action, 图标正是 icon.png,

现在点击图标按钮，

可以看到弹出的正是 popup.html 的内容。

注意如果修改了扩展里的文件需要在 扩展程序 界面 里点击重新加载才能生效。

 

在popup.html里面我们可以写html，css，js 来实现我们的业务逻辑。

注意 popup.html 中如果要写js， 需要写在单独的js文件里通过 script标签引入。

Popup 弹窗无法记录数据

看下面的例子,把你的 HelloChrome 程序中 popup.html 换为以下代码，并添加一个 popup.js 文件

popup.html

    
                   
Hello, Chrome
        +1

popup.js

var count = 0;$(function(){    $('#input').val(count);    $('#btn').click(function(){        count = count+1;        $('#input').val(count);    });})

我们在popup.html 中引入了两个js文件，一个是jquery2.0 的类库（最下面我给出了所有代码）， 一个是我们弹窗的业务代码popup.js。

重新载入扩展，点击插件按钮，显示如下图的功能：

当我们点击 “+1” ，输入框中的数字就会增加，然后关闭弹窗，再点开，发现数字又变成了0，这说明当我们关闭弹窗时，popup.html就被销毁了，我们在popup.js 中用count 存储的全局变量，也被销毁了。

那么问题来了，如果想让插件能记录我加到了哪个数字，而不是关掉弹窗数据就丢了，或者说我们在插件运行过程中怎么保存这些插件运行时的数据呢，答案就是用background 特性。

引入 Background

你可以通过 background 指定一个background.js文件，这个js文件是扩展被安装后会一直运行在浏览器中的程序，比如我们要保存一些扩展运行时的状态，缓存一些数据，或者绑定一些浏览器的事件等代码都可以放到这个js文件中。

让我们来修改 manifest.json

在broswer_action 后面加入：

{    "background" : {        "scripts": ["background.js"],        "persistent": false    }}

我们通过 background 属性，引入了一个background.js, 代码里面仅放一行代码:

var count = 0;

也就是说，我要用background.js 中的全局变量 count 来存储我们累加的数字，因为 background.js 中的全局变量在浏览器运行时都不会被销毁。

我们修改下 popup.js 来调用 background.js 中的全局变量

popup.js：

//在popup.js 中调用 backgourd.js 中的变量和方法，很重要var bg = chrome.extension.getBackgroundPage(); $(function(){    $('#input').val(bg.count);    $('#btn').click(function(){        bg.count = bg.count+1;        $('#input').val(bg.count);    });})

这时我们再重新载入我们的扩展目录，点击下插件按钮，看看是不是累加数据已经不会再丢失了。

这篇主要讲了在我们开发扩展时运行时的数据，需要保持在 background.js 中。还讲了如何在 popup.js 中调用 background.js 中的变量和函数。

 

介绍下 conent_scripts 的用法。

Content_scripts 简介

假如你想把访问到的页面里的图片都加上好看的边框你该怎么做？

用目前学习的东西，你是无法实现这个功能的，这时候你要用到 content_scripts ，

使用 content_scripts 你可以修改你当前访问的页面的dom，你可以实现类似下面这样的功能：

• 放大某些特殊信息的字体
• 把页面里所有链接形式的文本都加上a 标签
• 在页面中注入HTML，为页面附加新的功能或交互
  等等。

当然 content_scripts 也有一些限制，比如：

• 只能访问Chrome.extension、 Chrome.runtime 接口
• 不能直接访问它所在的扩展里的函数和变量，background里和 popup 里的都不行

看上去有些不合理，不过我们可以通过message 机制来实现content_scripts 和他所在扩展的通信，比如 background，和 popup ,从而间接实现调用扩展内部的变量和函数。

下面通过一个简单的例子来学习下 content_scripts 的用法以及它如何与自己所在的扩展进行通信。

给百度发送关键词

我们写一个例子来演示，Content_scripts 和 popup之间通信。

这个扩展主要实现了在popup.html 中向百度搜索框发送关键词，并提交搜索请求。

首先在manifest.json中添加 content_scripts 配置

{    "name": "腾百万",    "version": "1.0.0",    "manifest_version": 2,    "description": "演示content_scripts 的通信",    "browser_action": {        "default_title": "查看",        "default_icon": "icon.png",        "default_popup": "popup.html"    },    "content_scripts": [        {            "matches": ["https://www.baidu.com/*"],            "js": ["jquery-2.1.4.min.js","baidu.js"]        }    ],    "permissions" : ["tabs", "activeTab"] //向浏览器申请的权限}

content_scripts 配置块的意思是当页面 url 地址匹配到 “https://www.baidu.com/*” 模式时才向页面中注入jquery-2.1.4.min.js, baidu.js 两个js 文件， baidu.js 里是我们的主要的逻辑代码。

baidu.js

var kw = $('#kw');var form = $('#form');chrome.runtime.onMessage.addListener(    function (request, sender, sendResponse) {        if (request.action == "send") {            kw.val(request.keyword)            sendResponse({state:'关键词填写成功！'});        }        if (request.action == "submit") {            form.submit();            sendResponse({state:'提交成功！'});        }    });

可以看到，在baidu.js中注册了一个监听事件，来监听popup.js 众发送过来的消息, 使用了 Chrome 提供的Chrome.runtime.onMessage 接口。

我们看 popup.html 和 popup.js 的代码

    
                   
    
    发送
    提交

popup.js

$(function(){    var state = $('#state');    $('#send').click(function () {//给对象绑定事件        chrome.tabs.query({active:true, currentWindow:true}, function (tab) {//获取当前tab            //向tab发送请求            chrome.tabs.sendMessage(tab[0].id, {                 action: "send",                keyword: $('#keyword').val()            }, function (response) {                console.log(response);                state.html(response.state)            });        });    });    $('#submit').click(function () {        chrome.tabs.query({active:true, currentWindow:true}, function (tab) {            chrome.tabs.sendMessage(tab[0].id, {                 action: "submit"               }, function (response) {                state.html(response.state)            });        });    })})

到“扩展程序”界面装载上此 demo，效果如下图

（Chrome 下Gif图好像不能自动播放，右键在新窗口打开即可）

完整代码到这里找：

把程序的主要逻辑讲下，首先我们的 baidu.js 就是属于 content_scripts, 只要打开的是百度的（url 匹配了 https://www.baidu.com/*）页面，在 baidu.js 中就可以操作页面dom，我们在baidu.js 中注册了一个监听事件来监听popup.js发送过来的消息，如果action="keyword", 就把发送过来的关键字用 jquery 的方法设置到百度的搜索框中，点击“提交”按钮，相当于是触发百度搜索里的“百度一下”按钮。

转载地址：http://jruws.baihongyu.com/