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

你可能感兴趣的:(小结)