首页 前端知识 使用Vue.js开发Chrome浏览器插件:从零到一

使用Vue.js开发Chrome浏览器插件:从零到一

2024-08-30 20:08:31 前端知识 前端哥 503 482 我要收藏

使用Vue.js开发Chrome浏览器插件:从零到一

Chrome浏览器插件是一种强大的工具,它可以为用户提供更丰富的浏览体验。在本篇博客中,我们将探讨如何使用Vue.js框架来构建一个Chrome浏览器插件。

步骤1:准备工作

首先,确保你已经安装了Node.js和Vue CLI。如果还没有安装,你可以在终端中运行以下命令来安装Vue CLI:

npm install -g @vue/cli

步骤2:创建Vue.js项目

使用Vue CLI,我们可以轻松地创建一个新的Vue.js项目。在终端中,运行以下命令来创建一个新的Vue项目:

vue create chrome-extension-vue-example

然后,选择默认配置或手动配置,根据你的需要进行设置。确保你在手动配置中勾选了BabelLinter / Formatter选项。

步骤3:构建配置

在Vue.js项目中,你需要一个配置文件来处理项目的构建和打包(这里我使用的是webpack及部分插件)。在vue.config.js文件中添加以下内容:

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

const packageName = "chrome-extension-vue-example";

const copyFiles = [
  {
    from: path.resolve("src/manifest.json"),
    to: path.resolve(packageName, "manifest.json")
  },
  {
    from: path.resolve("public"),
    to: path.resolve(packageName)
  }
];

const plugins = [
  new CopyWebpackPlugin({
    patterns: copyFiles
  })
];

module.exports = {
  pages: {
    popup: {
      entry: `src/popup/popup.js`,
      template: `src/popup/popup.html`,
      filename: `popup.html`
    }
  },
  productionSourceMap: false,
  outputDir: path.join(__dirname, packageName),
  configureWebpack: {
    watch: true,
    entry: {
      content: "./src/content-scripts/content-script.js",
      background: "./src/background/background.js",
      popup: "./src/popup/popup.js",
    },
    output: {
      filename: "js/[name].js" //输出路径
    },
    plugins,
    optimization: {
      splitChunks: false // 不允许切分,打包时文件太大的情况会被webpack切分成几个文件
    }
  },
  css: {
    extract: {
      filename: "css/[name].css" // 提取CSS
    }
  }
};

在这个Webpack配置文件中,我们使用了CopyWebpackPlugin插件来将manifest.jsonpublic文件夹下的内容复制到打包后的目录中

项目结构:

image.png
构建后的结构

image.png

package.json


{  
    "name": "chrome-extension",  
    "version": "0.1.0",  
    "private": true,  
    "scripts": {  
        "serve": "vue-cli-service serve",  
        "build": "vue-cli-service build",  
        "lint": "vue-cli-service lint"  
    },  
    "dependencies": {  
        "core-js": "^3.8.3",  
        "vue": "^3.2.13"  
    },  
    "devDependencies": {  
        "@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-service": "~5.0.0",  
        "copy-webpack-plugin": "^6.0.2",  
        "eslint": "^7.32.0",  
        "eslint-plugin-vue": "^8.0.3"  
    },  
    "eslintConfig": {  
        "root": true,  
        "env": {  
            "node": true  
        },  
        "extends": [  
            "plugin:vue/vue3-essential",  
            "eslint:recommended"  
        ],  
        "parserOptions": {  
            "parser": "@babel/eslint-parser"  
        },  
        "rules": {}  
    },  
    "browserslist": [  
        "> 1%",  
        "last 2 versions",  
        "not dead",  
        "not ie 11"  
    ]  
}

步骤4:编写Chrome插件的清单文件(manifest.json)

Chrome浏览器插件需要一个清单文件来定义插件的基本信息。在你的项目根目录下,创建一个manifest.json文件,并定义插件的名称、版本、图标等信息。以下是一个示例的manifest.json文件:

{  
    "manifest_version": 3,  
    "name": "Vue Chrome Extension",  
    "version": "1.0",  
    "default_locale": "en",  
    "permissions": [  
    ],  
    "background": {  
    "service_worker": "js/background.js"  
    },  
    "action": {  
    "default_title": "popup",  
    "default_icon": {  
    "16": "assets/icon/16.png"  
    },  
    "default_popup": "popup.html"  
    },  
    "icons": {  
        "16": "assets/icon/16.png",  
        "48": "assets/icon/48.png",  
        "128": "assets/icon/128.png"  
    },  
    "content_scripts": [  
        {  
            "js": ["js/content.js"  ],  
            "css": ["css/content.css"], 
            "matches": ["<all_urls>" ], 
            "run_at": "document_idle"  
        }
     ]  
}

在上述清单文件中,我们定义了插件的名称、版本、权限、图标等信息。default_popup指定了插件的弹出页面,我们将在下一步创建该页面。

步骤5:使用Vue创建弹出页面

1.popup.html文件

在你的Vue项目中,创建一个名为popup.html的文件,用作插件的弹出页面。在该页面中,你可以使用Vue.js来构建你的用户界面。以下是一个简单的popup.html示例:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width,initial-scale=1.0">  
    <title>popup</title>  
</head>  
<body>  
    <div id="app"></div>  
</body>  
</html>

2.popup中的Vue组件

在Vue项目中,你可以按照正常的Vue.js开发方式编写组件。例如,创建一个名为App.vue的组件:

<template>  
    <div class="example">  
        hello, this is chrome extension vue  
    </div>  
</template>  
<style scoped>  
.example {  
    align-items: center;  
    display: flex;  
    position: relative;  
    margin: 0 16px;  
}  
</style>

3.popup.js内容,引入VUE组件

import { createApp } from 'vue'  
import App from './App.vue'  
createApp(App).mount('#app')

4.popup效果图

image.png

步骤6:使用vue构建你的content-script

content-script.js 是注入到具体的浏览器页面中运行的,我们在manifest.json中声明了该JS会注入到所有浏览器页面中,接下来看看在content-script中该如何使用vue构建一个页面

content-script.js文件

/* eslint-disable */ 
// 使用原生JS创建了一个锚点,将vue组件渲染到这个锚点上
import {createApp} from 'vue'  
import App from './App.vue'  
  
window.onload = function () {  
createExample()  
}  
function createExample() {  
const container = document.createElement('div');  
container.setAttribute('id', 'example-content-app')  
container.setAttribute('style', 'position: absolute;\n' +  
' display: flex;\n' +  
' top: 50%;\n' +  
' width: 400px;\n' +  
' left: 50%;\n' +  
' height: 400px;\n' +  
' transform: translate(-50%, -50%);\n' +  
' align-items: center;\n' +  
' justify-content: center;\n' +  
' background: #507ebf45;\n' +  
' border: 1px solid rgba(0, 0, 0, 0.05);\n' +  
' box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n' +  
' border-radius: 12px;')  
document.body.appendChild(container)  
const url = window.location.href;  
console.log(url)  
const app = createApp(App,{url: url})  // 演示如何向组件中传值
app.mount('#example-content-app');  
}  
chrome.runtime.onMessage.addListener(function(request)  
{  
if (request.target === 'CONTENT' && request.from === 'BACKGROUND') {  
  
}  
});

2.content-script中的vue组件

<template>  
    <div class="example">  
        hello, this is chrome extension vue. URL: {{ url }}  
    </div>  
</template>  
  
<script>  
export default {  
    props: {  
        url: String  
    }  
}  
</script>  
<style scoped>   // scoped 表示这个CSS只在该组件中生效,避免对页面中的元素造成影响
.example {  
    align-items: center;  
    display: flex;  
    position: relative;  
    margin: 0 16px;  
    font-size: 24px;  
    font-weight: 700;  
}  
</style>

3.效果图

image.png

步骤7:构建和加载插件

在你的Vue项目中,运行以下命令来构建插件:

vue-cli-service build

这将会在chrome-extension-vue-example目录下生成构建好的插件文件。将chrome-extension-vue-example目录作为你的Chrome插件的根目录,加载插件到Chrome浏览器中。

项目源码:https://github.com/ordersheet/chrome-extension/tree/main/chrome-extension

(该代码只是简单示例,并无复杂功能,想要了解如何实现更加复杂的功能,可以参考我之前的文章)

以上就是从零开始使用Vue.js开发Chrome浏览器插件的完整指南。希望这篇博客对你有所帮助,祝你开发愉快!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17254.html
标签
评论
发布的文章

JWT(JSON WEB TOKEN)详解

2024-09-10 23:09:36

NPM 常用命令(十二)

2024-09-10 23:09:24

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!