上手chrome插件开发

上手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