admin 管理员组

文章数量: 1184232

创建项目

自己搭建项目有点麻烦（主要是自己水平有点低，不会搞😀），这里借助第三方插件。以下都是基于vue3

安装vue脚手架

npm install -g vue-cli

创建vue项目

vue create 项目名称

安装依赖

vue add chrome-extension-cli

执行完命令后，会有一些问答。根据实际情况进行选择。依赖git地址：vue-cli-plugin-chrome-extension-cli

打包

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

效果

安装依赖
基本上只需要下载一个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");

重新打包加载

官方文档
插件开发文档：https://developer.chrome/docs/extensions/get-started?hl=zh-cn

开发

开发模式

运行：npm run build-watch，会生成一个dist目录，然后在浏览器扩展里选择加载解压缩的扩展，将扩展加载进来

页面效果更改后，界面会自动更新。
插件配置修改后，需要重新加载扩展。

文件目录结构

  • popup.vue 项目的启动文件，类似于vue项目中的App.vue
  • manifest.development.json 浏览器插件开发模式配置
  • manifest.production.json 浏览器插件生产模式配置

插件logo

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


配置

{
    "manifest_version": 3,
    "name": "tencent-translation",
    "description": "腾讯翻译君",
    "version": "0.0.1",
    "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";
}

本文标签： 浏览器 Vue

版权声明：本文标题：使用vue来开发浏览器扩展 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1765142100a3351589.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。