前端 javascript Chrome 拓展v3 动态向页面插入脚本

背景：

想做一个chrome插件，向页面中添加脚本 css、js ，储存在storage中，每次打开页面，在content.js 中向页面注入执行页面匹配的脚本。 

现象：

开发使用v3版本会出现如下报错：

content.js:3 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Either the 'unsafe-inline' keyword, a hash ('sha256-V9GpKNFLjsNEd/UJJgggfaabRSwG4P7JESZwQazBLZY='), or a nonce ('nonce-...') is required to enable inline execution.

​​​​​​​​​​分析：

fchrome extension v3 内容安全策略 ( CSP ) 不允许 eval方法  script标签 等 向页面注入脚本

解决方案：

1.将脚本储存在sessionStorage

// content.js

sessionStorage.setItem('javascript', 'console.log("I am script from content.js! ",Date.now())')

2.向页面注入静态js脚本inject.js ，如何处理脚本的逻辑就在这个文件中

// content.js

sessionStorage.setItem('javascript', 'console.log("I am script from content.js! ",Date.now())')

// 注入inject.js

const url = chrome.runtime.getURL('inject.js')

const script = document.createElement('script')

script.src=url

document.body.appendChild(script)

3.inject.js获取脚本 并注入页面

// inject.js

const scriptStr = sessionStorage.getItem('javascript')

const script = document.createElement('script')

script.innerHTML = scriptStr

document.body.appendChild(script)

 效果：

花了很长时间才尝试出的方法。如果解决了你的问题 记得点个赞哟！

参考链接