我们在浏览器页面访问时有跨域限制，不能在同一标签页访问不同域的网址。但我们很多时候有这方面需求，譬如想同时展示三个搜索页面对比搜索结果，方便获取最佳搜索内容。
浏览器扩展在访问网址时没有跨域限制，可以解决跨域需求。下面以 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
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
内容脚本 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 扩展。