Chrome插件开发——踩坑记录

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

问题

• 后台脚本的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