vue开发扩展

安装vue脚手架

npm install -g @vue/cli

创建vue项目

vue create my-vue-crx

这里执行命令后选择，vue3默认模版,然后等待安装完成即可。

然后cd到项目目录

安装依赖

安装chrome-extension-cli，可以快速初始化一个新的 Chrome 扩展项目，解放双手，不需要自己再去重写打包！！

vue add chrome-extension-cli

安装的时候填写和选择一些基本的信息即可

打包扩展

• 使用 npm run build-watch运行开发模式，将生成一个dist文件。 安装Extension Reloader，以便在热更新。 （注意，- 当您更改 manifest.json 文件时，它不会自动加载，您需要点选 extension 页面中的更新）
• 生产模式 npm run build，并将其压缩成 zip 并部署到 chrome 商店中。

安装element-plus

基本上只需要下载一个element就好，其他的用不到

npm install element-plus --save

引入element

在popup.js引入

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "../view/popup.vue";

const app = createApp(App);

app.use(ElementPlus);
app.mount("#app");

文件目录结构

popup.vue 项目的启动文件，类似于vue项目中的App.vue manifest.development.json 浏览器插件开发模式配置 manifest.production.json 浏览器插件生产模式配置 background.js 后台脚本，主要用于注入脚本 content.js 内容脚本，主要用于注入脚本 popup.js 弹框脚本，主要用于渲染页面

插件logo

插件的logo图片放在public目录下，这样编译后会到dist目录下

配置如下

{
    "manifest_version": 3,
    "name": "my-vue-crx",
    "description": "chrome extension",
    "version": "0.0.1",
    "background": {
        "service_worker": "/background.js"
    },
    "action": {
        "default_popup": "popup.html"
    },
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "/content.js"
            ]
        }
    ]
}

安装显示

两种常见的格式

点击扩展图标打开默认页面

"action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
},

设置default_popup后，会显示指定的html文件

点击扩展触发点击事件

这时候不能指定html文件

"action": {
    "default_popup": "",
    "default_icon": "icon.png"
},
"background": {
    "service_worker": "background.js"
},

background.js

chrome.action.onClicked.addListener((tab) => {
  if (!tab.url.includes("chrome://")) {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: reddenPage,
    });
  }
});

function reddenPage() {
  document.body.style.backgroundColor = "red";
}

避坑指南

不需要页面展示

由于我开发的插件不需要弹框和具体页面展示，在刚开始的时候我直接把manifest.json文件里面的action里面的所有内容都清空了，发现就算在background.js配置了相应的点击注入事件也不会注入执行脚本。 首先是初始化的manifest.json配置当中没有配置permissions，所以这个要先配置scripting，不然注入脚本的方法用不了。其次就是如果不需要弹框，不要直接清空action配置，将default_popup设置为空即可。