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