记录一下最近开发中的坑点。

问题

  • 后台脚本的persistent参数用处？
    • persistent属性定义了常驻后台的方式——当其值为true时，表示扩展将一直在后台运行，无论其是否正在工作；当其值为false时，表示扩展在后台按需运行，这就是Chrome后来提出的Event Page。Event Page可以有效减小扩展对内存的消耗，如非必要，请将persistent设置为false。注意，persistent的默认值为true。
    • https://www.cnblogs.com/giggle/p/8082672.html
  • js脚本互相引用，报错：cannot use import statement outside a module
    • 在manifest中注册所有脚本。如下，这样backgroud就可以引用utils里面的函数了
    • "background": {
    "scripts": [
        "js/common/utils.js",
        "js/common/background.js"
    ],
    "persistent": true
}
  • 引入vue.js后，渲染文字失败
    • 强制应用内容安全策略 (CSP) ，不能使用 new Function() 对表达式求值。
    • 改用兼容版本：https://github.com/vuejs/vue/tree/csp/dist，缺点是目前只支持vue的1.x版本
    • 或者使用vue-cli-plugin-chrome-ext开发
  • eslint 'chrome' is not defined
    • 在package.json里面的eslintConfig添加"webextensions": true
    • https://stackoverflow.com/questions/48584556/eslint-chrome-is-not-defined-no-undef
  • 使用chrome.extension.getBackgroundPage()获取后台脚本，长时间会失效，显示undefined
    • 需要将persistent属性设置为true
    • https://blog.csdn.net/jbk3311/article/details/103737039
  • IDEA报错，没有chrome
    • 引入chrome库即可
    • https://stackoverflow.com/questions/13997468/how-do-i-use-webstorm-for-chrome-extension-development
  • element-ui无法使用$message
    • 需要注册Vue.prototype.$message = Message;
    • https://www.jianshu.com/p/7e3e2041be39
  • vue默认标题修改
    • 修改config里的template属性就行。把模板位置改成对应模块的index文件，然后更改index.html的标题
    • template: src/${name}/index.html

Tips

  • chrome://extensions/ 可以直接加载项目文件
  • “查看视图：背景页”，可以查看后台脚本的输出情况
  • 使用vue-cli3开发：https://www.zhangshengrong.com/p/Mr1WyQxZNG/，https://juejin.im/post/5e59f8e65188254903694647
    • 使用了：https://github.com/superoo7/vue-cli-plugin-chrome-ext