项目结构

chrome 扩展项目结构

项目代码如上图所示，看似很多但通过扩展描述文件 manifest.json 可对各文件功能一目了然。扩展功能主要通过后台脚本 background.js 和内容脚本 iframe.js 实现

项目结构图

manifest.json

扩展描述文件 manifest.json 通过 json 数据对扩展做了基本设置，此示例扩展名称为 Three-Zhuge。

{
  "manifest_version": 3,
  "name": "Three-Zhuge", // 扩展名称 Three-Zhuge
  "version": "1.0",
  "description": "Open three websites in a single tab",
  "permissions": ["tabs", "activeTab"], // 声明扩展需要的权限
  "background": { // 定义扩展的后台脚本或服务工作线程
    "service_worker": "background.js" // 指定服务工作线程为 background.js
  },
  "action": {
    "default_popup": "popup.html",  // 指定当用户点击扩展图标时，显示的弹出页面
    "default_icon": {     // 指定 Chrome 扩展在不同场景下显示不同尺寸的图标，例如在扩展列表、地址栏图标、任务栏等位置
      "16": "icons/icon16.png", // 指定 16x16 像素的图标路径为   icons/icon16.png
      "48": "icons/icon48.png", // 指定 48x48 像素的图标路径为   icons/icon48.png
      "128": "icons/icon128.png" // 指定 128x128 像素的图标路径为   icons/icon128.png
    }
  },
  "web_accessible_resources": [ // 声明扩展中哪些资源可以被网页内容访问
    {
      "resources": ["iframe.html"], // 可以被网页内容访问的资源文件路径列表
      "matches": [""] // 指定资源可以被哪些URL访问
    }
  ],
  "content_scripts": [ // 定义扩展的内容脚本
     {                           
	     "matches": [""], // 定义哪些URL的页面会加载该内容脚本
	     "js": ["iframe.js"] // 定义要加载的JavaScript文件
     }
  ]
}

后台脚本

后台脚本(服务工作线程) background.js 是扩展的核心部分，它始终在后台运行，负责处理插件的全局逻辑和事件监听。在此项目中后台脚本在监听到 openTabs 消息时，会新打开一标签页，然后发送浏览器中前三个标签页的网址。

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    // 当收到 openTabs action 时才执行后面操作
    if (message.action === "openTabs") {
	  chrome.tabs.query({ currentWindow: true }, (tabs) => {
            // 获取当前窗口的前三个标签页
            const tabUrls = tabs.slice(0, 3).map(tab => tab.url);
            console.log(tabUrls);

            // 创建一个新的标签页并打开iframe.html
            chrome.tabs.create({ url: chrome.runtime.getURL("iframe.html") }, (newTab) => {
              // 等待新标签页加载完成
              chrome.tabs.onUpdated.addListener(function listener(tabId, changeInfo) {
                  if (tabId === newTab.id && changeInfo.status === 'complete') {
                      // 向新标签页发送消息，传递三个标签页的URL
                      chrome.tabs.sendMessage(newTab.id, { urls: tabUrls });
                      // 移除监听器
                      chrome.tabs.onUpdated.removeListener(listener);
                  }
              });
            });
        });
    }
    return true; // 表示异步响应
});

点击扩展图标时的弹出页

popup.html 定义了点击扩展图标时的弹出页，点击按钮“Open Tabs in Iframes”时会调用 popup.js 脚本。




  Multi-Tab Viewer


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

popup.js 在按钮“Open Tabs in Iframes”被点击时会发送消息“openTabs”，后台脚本 background.js 会处理此消息。

document.getElementById("openTabs").addEventListener("click", () => {
  console.log("click openTabs");
  chrome.runtime.sendMessage({ action: "openTabs" });
});

内容脚本

iframe.html 定义了新打开的标签页内容，三个 iframe DOM 元素可以展示三个不同域网址内容，内容脚本 iframe.js 会填充这些 iframe DOM 元素。




  Multi-Tab Viewer
  


  Open Tabs in Iframes
  
  
  
  <script src="iframe.js"></script>

内容脚本 iframe.js 是运行在网页上下文中的 JavaScript 代码，可以访问和操作网页的 DOM，从而实现对网页内容的修改或增强。在此项目中 iframe.js 会接收后台脚本发送的浏览器中前三个标签页网址，并用 iframe 展示网址内容。

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("hello world");
  if (message.urls) {
    const iframes = document.querySelectorAll("iframe");
    message.urls.forEach((url, index) => {
      if (index < iframes.length) {
        iframes[index].src = url;
      }
    });
  }
});

使用插件

在 Chrome 浏览器使用刚开发好的扩展非常简单，点击"右上角三点"->"扩展程序"->"管理扩展程序"，然后点击左上角“加载已解压的扩展程序”，就可以使用扩展 Three-Zhuge。如下图所示，我先打开三个标签页 baidu.com、csdn.com、soso.com，然后使用扩展 Three-Zhuge 把前三个标签页在一个新打开的标签页中显示。

本文用一个示例: 在一个标签页中打开三个不同域名的标签页内容，介绍了开发 Chrome 扩展的基本步骤。可见其开发并不复杂，希望以后也开发一个实用的 Chrome 扩展。

万普插件库

jQuery插件大全与特效教程

轻松开发 chrome 扩展展示不同域内容