Chrome扩展程序开发

HTML  2025-06-19 11:00  361  

因为屏幕大小限制，经常需要将Iframe页面在新标签页打开，因此开发一个扩展程序快速在新标签页打开Iframe

Chrome扩展程序需要一个manifest.json用于定义一些基础数据

manifest.json:

{
    "name": "Iframe In New Tab",
    "description": "Open iframe Page In New Tab Quickly",
    "version": "1.0",
    "manifest_version": 3,
    "action": {
        "default_popup": "popup.html",
        "default_icon": "newtab_16.png"
    },
    "permissions": [
        "contextMenus"
    ],
    "background": {
        "service_worker": "background.js",
        "type": "module"
    },
    "icons": {
        "16": "newtab_16.png",
        "48": "newtab_48.png",
        "128": "newtab_128.png"
    }
}

需要注意action、permissions、background

action定义安装扩展程序后，浏览器右上方扩展程序按钮相关行为，default_popup为点击扩展程序图标后对应的页面，因为我们程序没有交互，因此给出简单提示

popup.html：

<html>

<style>
  html,
  body {
    min-width: 205px;
    min-height: 33px;
  }

  hr {
    width: 100%;
  }
</style>

<body>
  <h1></h1>
  <p>
    <b>Iframe In New Tab</b>
    <br>
    Right-click the iframe area for options.
  </p>
</body>

</html>

permissions为该扩展程序需要的权限，我们的扩展程序需要在浏览器创建右键菜单，因此声明contextMenus

扩展程序可以在后台通过扩展程序的"service worker"监听浏览器事件,background用于指定你的相关监听代码，我们会在这里监听扩展程序安装事件，为页面创建右键菜单，以及该菜单的点击事件

background.js:

// 注册扩展程序安装事件，会在扩展程序被安装、扩展程序更新、浏览器更新时执行
chrome.runtime.onInstalled.addListener(function () {
    chrome.contextMenus.create({
        id: "iframe_menu",
        title: 'Open In New Tab',
        type: 'normal',
        contexts: ['frame']
    });
});

// 监听菜单点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "iframe_menu") {
        // 获取iframe的URL
        const frameUrl = info.frameUrl;
        if (frameUrl) {
            chrome.tabs.create({ url: frameUrl, index: tab.index + 1 });
        }
    }
});

将以上代码及相关图片资源放入一个文件夹中，打开Chrome扩展程序页面，启用开发者模式后，点击加载已解压的扩展程序，即可使用扩展程序

使用效果展示:

完整源码:Github

参考资料：

Hello World extension


发布于 2025-06-19 11:00, 最后修改于2025-06-20 08:59