使用create-react-app開發Chrome插件

chrome插件

下面是我學習谷歌插件開發時看的一些文檔博客

• 使用React.js開發Chrome插件
• Chrome插件(擴展)開發全攻略
• manifest.json字段解釋
• 中文文檔
• 英文官方文檔
• 圖靈Chrome擴展及應用開發

谷歌插件都一個清單manifest.json文件，該文件具體編寫請看我寫的另一篇文章

create-react-app初始化

npx create-react-app chrome_extension

1. 將src下的index.html移至public文件夾下
2. npm insatll之後，修改public下的manifest.json文件，以使其滿足谷歌插件的條件
3. npm run build
4. 谷歌瀏覽器打開擴展程序並使用開發者模式，導入打包之後的build文件

問題

1. create-react-app默認是內聯js文件，而由於谷歌插件引入了csp（內容安全策略）。所以無法使用內聯文件

   修改create-react-apppackage.json中build命令"build":"INLINE_RUNTIME_CHUNK=false react-scripts build"