返回

Chrome扩展程序的力量

前端

Chrome扩展程序的力量

对于想要定制和增强网络浏览体验的人来说，Chrome 扩展程序无疑是一个强大且有用的工具。这些小应用程序允许用户根据自己的需求修改和调整浏览器，使其工作效率更高，操作更便捷。

创建 Chrome 扩展程序并不难，特别如果你已经熟悉 HTML、CSS 和 JavaScript 等 Web 技术。在这篇文章中，我们将使用 Vue.js 框架来创建一个简单的 Chrome 扩展程序，该扩展程序将向页面添加一个按钮，当用户点击该按钮时，它将显示一条简单的消息。

先决条件

在开始之前，请确保您已经满足以下先决条件：

设置项目

  1. 安装 Vue.js CLI：
npm install -g @vue/cli
  1. 创建一个新的 Vue.js 项目：
vue create chrome-extension
  1. 进入项目目录：
cd chrome-extension
  1. 安装 Vuetify，这是一个用于构建 Vue.js 应用程序的 UI 框架：
vue add vuetify

构建扩展程序

  1. 在项目目录中创建一个新的文件夹，命名为 src/extension。

  2. 在 src/extension 文件夹中，创建一个新的文件，命名为 manifest.json。此文件将包含有关扩展程序的信息，例如其名称、版本和权限。

  3. 将以下代码复制到 manifest.json 文件中：

{
  "manifest_version": 3,
  "name": "My Vue.js Extension",
  "version": "1.0.0",
  "description": "A simple Chrome extension that displays a message when a button is clicked.",
  "permissions": [],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_title": "Click me!",
    "default_popup": "popup.html"
  }
}

  1. 在 src/extension 文件夹中，创建一个新的文件，命名为 background.js。此文件将在后台运行，并监听来自弹出窗口的消息。

  2. 将以下代码复制到 background.js 文件中：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {message: "hello from background script!"});
  });
});

  1. 在 src/extension 文件夹中，创建一个新的文件，命名为 popup.html。此文件将包含扩展程序的弹出窗口。

  2. 将以下代码复制到 popup.html 文件中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <div id="app">
    <button @click="showMessage">Click me!</button>
  </div>

  <script src="popup.js"></script>
</body>
</html>

  1. 在 src/extension 文件夹中，创建一个新的文件，命名为 popup.js。此文件将包含弹出窗口的 Vue.js 应用程序。

  2. 将以下代码复制到 popup.js 文件中：

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    showMessage() {
      chrome.runtime.sendMessage({message: "hello from popup script!"}, function(response) {
        this.message = response.message;
      });
    }
  }
});

打包扩展程序

  1. 在项目目录中，运行以下命令：
vue-cli-service build --target chrome-extension

这将生成一个包含扩展程序所有文件的 dist 文件夹。

  1. 在 dist 文件夹中，找到 chrome-extension 文件夹。此文件夹包含扩展程序的清单文件和所有其他文件。

  2. 将 chrome-extension 文件夹复制到计算机上的某个位置。

安装扩展程序

  1. 在 Chrome 浏览器中，打开扩展程序页面：
chrome://extensions/
  1. 启用开发人员模式：
在页面右上角，单击“开发人员模式”开关。

  1. 将 chrome-extension 文件夹拖放到扩展程序页面上。

  2. 单击“添加扩展程序”按钮。

扩展程序现在将安装在您的浏览器中。您可以通过单击浏览器工具栏上的扩展程序图标来访问它。

使用扩展程序

要使用扩展程序，请单击浏览器工具栏上的扩展程序图标。这将打开弹出窗口。

在弹出窗口中，单击“点击我！”按钮。这将向后台脚本发送一条消息。

后台脚本将收到消息并将其发送回弹出窗口。消息将显示在弹出窗口中。