【报错】‘chrome’ is not defined
【解决】添加注释/* global chrome*/
【参考】Using chrome api with React.js
【报错】Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’ ‘wasm-unsafe-eval’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-Rltx/b//LIKPauTaz2gv4cpsZ0YVU5h3PTnfuiTtV/U=’), or a nonce (‘nonce-…’) is required to enable inline execution.
【解决】MV3不允许注入动态脚本，如果要运行动态脚本，可以让受信任的静态脚本获取远程脚本实现，注意引入的js文件需要加入web_accessible_resources获取权限，详见问题三
function nullThrows(v) {
if (!v) {
throw new Error("It's null")
return v
function active() {
const mockDataNode = document.getElementById('banner-active');
if (mockDataNode) {
return null;
const myScript = document.createElement('script');
myScript.src = chrome.runtime.getURL('static/js/active.js');
myScript.id = 'banner-active';
myScript.onload = function () {
console.log("active script injected");
this.remove();
nullThrows(document.body || document.documentElement).appendChild(myScript);
【参考】Chrome extension manifest v3 Content Security Policy
【报错】Denying load of chrome-extension://ddoklifpkebknaekabdfkgmleofcbihn/static/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
【解决】引入的js没有执行权限，将需要插入目标页面的js加入web_accessible_resources中
"web_accessible_resources": [
"resources": [
"/static/js/*.js"
"matches": [
"<all_urls>"
"extension_ids": []
【参考】web_accessible_resources - Mozilla | MDN
Injecting a script tag from a content script to an iframe with data URI src throws a ‘web_accessible_resources’ error even tho it’s set correctly
这是一个浏览器扩展（插件）的基础框架，基于 Vue3、Chrome Extension V3、Tailwind CSS UI。
package.json 部分内容如下
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.
manifest.json 官方文档
Chrome Extension API
360浏览器的插件文档 中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考
Chrome 官方案例库
如何实现网页和Chrome插件之间的通信
manifest.json 配置说明
manifest.json 用于描述...
Vue3 与 Vue2 在项目搭建上有一些细微的差别，下面是使用 Vue CLI 创建一个基于 Vue3 的 Chrome 插件项目的步骤：
1. 确保已经安装了最新版本的 Vue CLI：
npm install -g @vue/cli
2. 创建一个新的 Vue 项目，添加 `--preset chrome` 参数，表示使用 Chrome 插件预设：
vue create my-chrome-extension --preset chrome
3. 进入项目所在的文件夹：
cd my-chrome-extension
4. 在 `src/manifest.json` 文件中配置你的 Chrome 插件信息，例如：
"name": "My Chrome Extension",
"version": "0.1",
"manifest_version": 3,
"description": "This is my Chrome extension",
"action": {
"default_popup": "popup.html"
"permissions": [
"storage",
"activeTab"
5. 在 `public/popup.html` 文件中编写你的 Chrome 插件弹窗内容，例如：
```html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>My Chrome Extension</title>
</head>
<h1>Hello, world!</h1>
<script src="popup.js"></script>
</body>
</html>
6. 在 `src/popup.js` 文件中编写你的 Chrome 插件弹窗逻辑，例如：
```js
console.log('Popup loaded!')
7. 在 `src/background.js` 文件中编写你的 Chrome 插件后台逻辑，例如：
```js
chrome.runtime.onInstalled.addListener(() => {
console.log('Extension installed!')
8. 在 `manifest.json` 文件中设置 `background` 字段，用于指定后台脚本：
// ...
"background": {
"service_worker": "background.js"
9. 运行 `npm run build` 命令编译项目：
npm run build
10. 在 Chrome 浏览器中打开 `chrome://extensions/` 页面，点击右上角的“开发者模式”按钮，然后点击“加载已解压的扩展程序”按钮，选择项目中的 `dist` 文件夹即可。
至此，一个基于 Vue3 的 Chrome 插件项目就搭建完成了。你可以在项目的 `src` 文件夹中编写你的插件逻辑，然后通过 `npm run build` 命令打包发布你的插件。
