上手chrome插件开发

比想象中要简单

项目基本目录

// 简单的demo目录

├── icon.png
├── manifest.json
├── popup.html
└── popup.js

上手调试

打开chrome://extensions/ 开启开发者模式，

选择加载已解压的扩展程序

选中自己的项目文件即可上手调试

项目下文件解析

manifest.json 配置文件

{
 // 必须
 "manifest_version": 2,
  "name": "我的扩展程序",
  "version": "版本字符串",
  
  // 可选：浏览器按钮可以包含图标、工具提示、徽章和弹出内容。
   "browser_action": { 
    "default_title": "get cookie In chrome", // 鼠标移动到插件icon会tips
    "default_popup": "popup.html", // 点击之后popup出来的部分
    "default_icon": "icon.png", // 插件的icon
    
    // page_action 配置的是指浏览器地址栏中的一些交互，较少人这么用
    
    
    "background": { // 后台运行程勋/脚本配置
        "scripts": ["eventPage.js"], // 脚本，
         "page": "background.html", // 也可以是html
        "persistent": false // 是否长期运作
      },
      
     "permissions": [ // 权限配置，表示在js执行过程能使用的权限
          "tabs", // 拥有使用chrome tab的权限
          "bookmarks", // 可以使用书签的权限
          
          "http://www.blogger.com/", // 设置站点权限
          "http://*.google.com/", 
          "unlimitedStorage" // 不限制存储
          ...// 详细配置请看下面
        ],
    ....
  },
 }

上面提到部分的详细说明文档：

permissions 权限清单

通讯

1.chrome.runtime.sendMessage 适合

content.js => background.js 通讯
content.js => popup.js 通讯
background.js => popup.js 通讯

2.chrome.tabs.sendMessage适合

background.js => content.js

popup.js => content.js

3.接受信息用chrome.runtime.onMessage.addListener

4.popup页面可以通过chrome.extension.getBackgroundPage() 方式调用background的函数

一些小坑

1.引入vue 会出现安全性问题，需要在manifest.json中设置

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

2.如果需要在background中使用jquery, 需要提前将jquery在background.js之前引入，如：

"background": {
    "scripts": [jquery-3.4.1.min.js", "background.js"],
    "persistent": true
  },

3.每个运行环境都有自己的devTools，比如popup界面需要调出开发者工具需要对着插件的icon点击右键，然后点击审查弹出内容，需要调出background需要在chrome://extensions/ 找到插件，如果background.js配置成功的话会有一个背景页的链接，点击就会调出开发者工具

4.官方说在background写定时任务需要使用到alarm 但是实际上settimeout和setintervel也是可以的（另外如果防止chrome杀掉后台程序，需要设置manifest.json中的persistent = true）

5.在background 程序中可以发器ajax请求，但是需要api所在服务器支持跨域设置

6.html中的inline javascript 不会被执行

我的小应用(chrome中获取指定网站的cookie)

https://github.com/spademan/get-cookie-in-chrome

希望能给个小星星

参考文档

spademan