Chrome 扩展开发

要点

• 注意权限增加时，会导致扩展被浏览器禁用，因此原则上应保持权限最小化，升级时要格外注意

在 Chrome 中安全地使用 eval

• 内容安全策略 - Content Security Policy (CSP)
  • 不允许内联脚本，必须单独放到文件中
  • 内联事件处理必须使用addEventListener，禁止使用eval()

但是有很多库使用了eval()或类似 eval 的结构，比如new Function()。尤其是模板库存在上述问题，而 Google 家的 Angular.js 支持 CSP。

eval之所以危险是因为它执行的代码能在扩展高权限环境下防问一切。

解决方案是在沙盒中运行eval，接触不到可以影响用户安全和隐私的 API 和数据。

1. 在配置中声明用到eval的页面

   {
     ...,
     "sandbox": {
        "pages": ["sandbox.html"]
     },
     ...
   }

2. 创建后台页面，用 iframe 指向 sandbox.html

3. 后台脚本用于与 sandbox.html 通信，写上发送消息事件，监听返回处理

4. 在 sandbox.html 里，写上返回消息事件

Chrome Extensions - Why Not Use The Sandbox? by Daniel Prentis on Prezi

• 最后再考虑使用 sandbox，有些缺点比如测试麻烦
• 可以使用 jQuery Fragments

进一步了解关于内容安全策略 Content Security Policy

支持 CSP 的模板库 addyosmani/mustache-for-chromeapps

权限

在 permisions 和 content_script 中设置域名匹配，以便于跨域请求，发布时会要求深入审核

建议在 permision 中使用 activeTab，可跨域访问当前打开的页面域名，减少审核难度

declarativeNetRequest 使用，id 需要有变量，回调仅是设置成功，不支持过滤 url

https://github.com/ray-lothian/Block-Site/blob/31026cd63e162ec61de4c3a5704bdb7fec2b8530/v3/contextmenu.js#L116

starter template

https://github.com/xiaoluoboding/chrome-ext-mv3-starter

https://github.com/antfu/vitesse-webext 这个主分支是 v2 的，子分支有 v3 版本，不确定可用程度

• [x] 调研 https://windicss.org/integrations/vite.html https://windicss.org/guide/migration.html windicss更快、兼容性更好，但最后更新是 2022.05

设置实现及同步

• [ ] 调研主流插件实现

脚手架

类似 vue-cli

Next-gen Web Extension Framework – WXT