Manifest文件

插件的配置文件，定义了插件的基本信息、权限和功能。

比如

{
  "name": "插件名称",
  "version": "1.0",
  "description": "插件描述",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },
  "permissions": ["activeTab", "storage"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

Popup页面

当用户点击浏览器工具栏上的插件图标时，会弹出的页面。使用Vue3和Vuetify可以快速构建功能丰富的popup页面。

比如

<template>
  <v-app>
    <v-card>
      <v-card-text>
        <v-text-field
          v-model="searchQuery"
          label="Search"
          @change="performSearch"
        ></v-text-field>
      </v-card-text>
    </v-card>
  </v-app>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const searchQuery = ref('');

    const performSearch = () => {
      // 执行搜索逻辑
    };

    return {
      searchQuery,
      performSearch
    };
  }
};
</script>

Content scripts

content.js这些脚本会注入到指定的网页中，允许插件与这些网页进行交互。

比如

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'performSearch') {
    // 在当前页面执行搜索逻辑
    sendResponse({ result: 'search results' });
  }
});

Background scripts

background.js这些脚本在后台运行，可以监听浏览器事件并执行长期任务。

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.url) {
    // 处理URL变化
    chrome.tabs.sendMessage(tabId, { action: 'urlChanged', url: changeInfo.url });
  }
});