Google浏览器插件入门教程

首先给一个概念

一个应用（扩展）其实是压缩在一起的一组文件，包括HTML，CSS，Javascript脚本，图片文件，还有其它任何需要的文件。 应用（扩展）本质上来说就是web页面，它们可以使用所有的浏览器提供的API，从XMLHttpRequest到JSON到HTML5全都有。

---

去年的时候想抓取淘宝卖家自己的卖出宝贝的数据，但是受个人技术限制，模拟登陆无法绕过淘宝的登陆验证码限制。所以试图做一个浏览器插件去定时抓取指定页面的消息。

目前在墙内我能找到的文档中，最全面的应该是这个
http://open.chrome.360.cn/extension_dev/overview.html 已作废，后边有新的

但是这篇文档也是数年前翻译过来的，可能多处地方已经和现在的产生了区别。但大致上可以作为一个参考。

正巧最近手上接了一个插件的小项目，虽然我只是负责写前端页面，但也借此机会再学习一下。

---

下面进入正文

我们先去随便安装一些浏览器插件
然后进入插件安装后的地址
默认为：
C:\Users\ “你的用户名” \AppData\Local\Google\Chrome\User Data\Default\Extensions

这里面每个文件夹都是一个独立的浏览器插件

上面的无规律文件夹名称其实就是这个插件对应的ID

我们随便打开一个文件夹

进入文件夹后，我们发现只有一个子文件夹，这个文件夹名对应着版本号，这个版本号是插件发布打包的时候自动生成的。
因为如果用户安装了多个版本的插件，插件ID应该是一样的（猜测，我本人并没有正式发布过），都要安装在这个文件夹下，这个时候就需要用版本号来区分了。

进入版本号文件夹下，就看到我们真正需要的源文件了。

首先要和大家说明的，也是我当初一头雾水的地方，我们做过的很多项目都又一个规定的目录结构，浏览器插件的要求很简单，只要求最外层有一个manifest.json 就可以让浏览器知道你写的这个东西是干啥用的了，其他的随意。。。

做过Android 开发的同学肯定对这个manifest 熟悉，里面就是一些配置权限之类的了。

这里我们以一个划词翻译的插件为例
以注释的方式给大家说明
重要的给大家用!!!标出

{
   "author": "Milk Lee \u003Cmilk.lee@qq.com>",
   //作者名称
   "background": {
      "scripts": [ "/bundle/commons3.js", "/bundle/bg.js" ]
   },
   //!!!"背景页"虽然叫这个名字，但是引入的都是js的文件，是可以没有一个明确的页面的，也可以引入html文件但大部分插件是采用了用JS动态生成的方案
   //我们可以理解成只要浏览器在运行，这个页面就一直在运行，这个文件中的变量就不会被销毁，便于我们在多个标签页（tab）之间通讯
   "browser_action": {
   //这个browser_action包括浏览器右上角的插件图标，图标上显示的效果，比如气泡提示，on/off等状态,和点击之后的弹窗。（下方会有截图说明一下）
      "default_icon": {
         "19": "/logo.png",
         "38": "/logo.png"
      },
      //默认图标(old)依然会生效，下方有新的
      "default_popup": "/popup/index.html"
      //！！！弹出页 popup
      //这个地方也就是我们使用插件最多的交互页面，需要注意的是，在这个页面只要隐藏，就代表这个页面被关闭了，也就是说上面的数据无法保存。
      //所以一些需要临时储存的信息我们需要保存到background中
   },
   "commands": {
      "_execute_browser_action": {
         "suggested_key": {
            "default": "Ctrl+Q",
            "mac": "MacCtrl+Q"
         }
      },
      "translate": {
         "description": "翻译网页中选中的文本",
         "suggested_key": {
            "default": "Alt+A"
         }
      }
      //绑定快捷键，猜测是按下快捷键后会执行background文件或content_script中相应的方法
      //第一个是弹出popup，相当于点击图标
      //第二个直接执行translate方法
   },
   "content_scripts": [ {
   //嵌入页面内部的文件，可以认为等效于在指定页面中增加的内容，这里是数组，可以给不同页面分配不同的js文件
      "all_frames": true,
      "css": [ "/bundle/commons1.js.css" ],
      "js": [ "/bundle/commons3.js", "/bundle/commons2.js", "/bundle/commons1.js", "/bundle/content.js" ],
      "matches": [ "http://*/*", "https://*/*", "file:///*" ],
      //指定适用页面
      "run_at": "document_start"
   } ],
   
   //扩展策略，安全方面的，我也不是很了解这块
   "content_security_policy": "script-src 'self' 'unsafe-eval' https://www.google-analytics.com; object-src 'self'",
   //插件简介
   "description": "支持谷歌、百度、有道三大翻译和朗读引擎，可以方便的查看、复制和朗读不同引擎的翻译结果。",
   "homepage_url": "https://github.com/lmk123/crx-selection-translate",
   //如果你把插件放在自己的网站上需要，如果发布在市场就不需要了
   "icons": {
      "128": "/logo.png",
      "16": "/logo.png",
      "48": "/logo.png"
   },
   //图标(new)三种尺寸的图标在不同地方显示
   "incognito": "split",
   //设置在隐身窗口中做出的相应，详情查看文档
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC28U3at5pX9CdXpey4QOxy5tpKRQQ+R3IXAaj8NPqT4pQh9X0jpX7Cc4w8SSrVph+m43e9T72B8NEjc9km4boLuxshHVnTGi7HLlQpPQV10BM2GeNMxQDkK5ca3oL6gVMMNGnq+PJDygweV1yMfcsJlLL/zdmrZ5CXADHBZ2lUbwIDAQAB",
   //这个值并不是开发时显式指定的，而是Chrome在安装.crx时辅助生成的，作为一个唯一标志值。
   "manifest_version": 2,
   //从Chrome 18开始，开发者应该指定版本号为2
   "minimum_chrome_version": "29",
   //支持chrome 的最低版本
   "name": "划词翻译",
   //扩展名称
   "options_page": "/options/index.html",
   //选项页面(old)
   "options_ui": {
      "chrome_style": true,
      "page": "/options/index.html"
   },
   //同为选项页面,是上面选项的升级版
   "permissions": [ "\u003Call_urls>", "contextMenus", "storage", "clipboardWrite", "clipboardRead", "activeTab", "identity", "webRequest", "webRequestBlocking" ],
   //!!!要求chrome浏览器授予的权限
   "update_url": "https://clients2.google.com/service/update2/crx",
   //更新地址，如果发布在市场则不需要自己填写
   "version": "6.4.3",
   //版本号
   "web_accessible_resources": [ "/bundle/*.woff", "/content-scripts/web/embed/*", "/pdf-viewer/*" ]
   //指定当前网页可以访问的插件自带的资源，是相对于manifest文件的路径
}

上面是对于manifest文件做出的简介，在写这篇文章的过程中，我突然发现了墙内最新的文档。
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json
可惜访问速度比较慢，而且应该是针对火狐的chrome扩展，在这个页面开头有说明。
目前没发现差异。不过页面比360的不要好看太多。

卧槽，我自己找教程的时候找了一堆没用的
为什么写这个东西的时候却发现已经有大神早早的就写好了。
https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
如果想有深入了解的同学可以异步这个地方

---

其实上面的东西说完之后，已经算的上对插件开发有一个简单的了解了
下面我们一起做个小demo来演示一下吧
目录结构

manifest.json

{
  {
    "manifest_version": 2,
    "name": "starxder_demo",
    "version": "1.0",

    "description": "一个浏览器插件demo",

    "browser_action": {
        "default_popup": "popup/popup.html"

    },
	
	//这里说明一下即使匹配页面写成  "*://*/*" 空白页和chrome浏览器的 设置 插件 浏览历史 等页面依然不会生效，所以小伙伴们使用的时候要注意。
    "content_scripts": [{
        "matches": [
            "*://*/*"
        ],
        "js": ["content/content.js"]
    }],

    "icons": {
        "128": "icons/smile-48.png",
        "16": "icons/smile-48.png",
        "48": "icons/smile-48.png"
    },
    "permissions": [
    ]
}

16 图片对应位置

48 图片对应位置

128 暂时没找到，可能是在商店页面？

popup.html

<!DOCTYPE html>
<html lang="en">
<html>

<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script type="text/javascript" src="popup/popup.js"></script>
</head>

<body style="width:185px;height: 100px;">
    <b class="text">这里是popup页面</b>
</body>
</html>

这个时候

其实已经可以装上去了
看一下效果

下面的内容需要一些JS基础，不过我会说的尽量详细

我们实现一个简单功能，就是点击popup上的一个按钮
在当前活动页上弹出一个浮动框
这里注意一下js 内容不能写在popup.html文件中
必须用script标签引入，我们上面已经引入jquery 和 popup.js了

新增一个button

    <b class="text">这里是popup页面</b>
    <button id="btn" >弹出</button>

在popup.js 文件中定义一个点击事件
和一个sendMessage的方法

document.getElementById("btn").onclick = function () {
    sendMessage()
}

function sendMessage() {
    chrome.tabs.query({
        active: true,
        currentWindow: true
    }, function (tabs) {
        console.log(tabs)
        chrome.tabs.sendMessage(tabs[0].id, {
            message: "btn按钮点击",
        });
    });
}

chrome.tabs.query（查询条件json，回调函数（tabs））
我们写的是给指定的标签页（tab）发送消息，所以我们应该先选出我们的目标即当前窗口，而且当前窗口是活动状态。
在回调函数中我们使用的 tabs 即为我们查询所返回的数组，显然我们的查询结果只会有一个，所以我们当前需要的 tab 的 id 就是 tabs[0].id

这个时候我们发送了一个事件给当前的页面，那么如何去监听呢？

上面我们说到在manifest中有一个叫content_scripts的选项，即为嵌入页面中的js文件，我们在这个文件中定义监听。

content.js

//接收sendMessage事件,只要chrome.tabs.sendMessage触发,被指定的标签页中嵌入的chrome.extension.onMessage会生效,至此我们发送的消息被我们指定的页面监听到了，可以随便让他做点什么

chrome.extension.onMessage.addListener(
    function (request, sender) {
        if (request.message == "btn按钮点击") {
            Toast(request.message, 2000)
        }
    });


//一个随便的浮动弹窗
function Toast(msg, duration) {
    duration = isNaN(duration) ? 3000 : duration;
    var m = document.createElement('div');
    m.innerHTML = msg;
    m.style.cssText = "max-width:60%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 98, 11);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 10%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(255, 255, 255);border: 1px solid rgb(255, 98, 11);font-size: 16px;";
    document.body.appendChild(m);
    setTimeout(function () {
        var d = 0.5;
        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
        m.style.opacity = '0';
        setTimeout(function () {
            document.body.removeChild(m)
        }, d * 1000);
    }, duration);
}

这里是最终实现的效果。

感谢看到这里的小伙伴，如果需要更牛哔的插件相关技巧可以去看官方文档或者上面的大佬的博客。

---

end