上手chrome插件开发chrome-获取网站cookie

上手 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/g…

希望能给个小星星

参考文档