chrome插件开发

背景

一直都想做一个下载知页简历的工具，开始的时候考虑过用油猴，但是油猴不方便分享和安装，而且开放的接口也不是很全。思来想去还是决定搞个chrome的原生插件。

文件结构

chrome的文件结构很简单，主要就是manifest.json文件，查看完整介绍：http://chrome.cenchy.com/manifest.html，很多地方已经过时了，如标签事件，需要自行辨别。

{
// 必须的字段
  "name": "My Extension",
  "version": "versionString",// 插件版本
  "manifest_version": 2, // 必须填2
  // 建议提供的字段
  "description": "A plain text description",
  "icons": {
  	// 扩展管理列表里显示的图标
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
    },
  // 多选一，或者都不提供
  "browser_action": {...},
  "page_action": {...},
  "theme": {...},
  "app": {...},
  // 根据需要提供
  "chrome_url_overrides": {...},// 可以将Chrome默认的一些特定页面替换掉
  "content_scripts": [
      "matches": [
        "*://*/*"
      ],
      "css": [
        "css/style.css"
      ],
      "js": [
        "js/jquery-3.6.0.min.js",
      ]
  ],// 在Web页面内运行的javascript脚本
  "permissions": [                      
    "http://*/*",
    "https://*/*",
    "webRequest",
    "webRequestBlocking",
    "cookies",
    "background",
    "storage",
    "notifications"
   ],// 声明插件需要的权限，有些权限需要用户确认
}

注意事项

1. 调试popup.html：点开插件浮窗后右击浮窗容器，点检查即可打开popup调试窗口。
2. 调试background.js：在扩展管理中找到当前扩展，点击背景页即可打开background调试窗口。
3. 调试devtools.js：每次修改代码后最好在扩展列表页刷新一下当前扩展，回到网页：关闭开发者工具、刷新网页、再打开开发者工具。懒人快捷：F12+F5+F12。