Chrome 扩展程序创建一个可通过单击浏览器操作访问的 .html 页面。

Posted 2023-03-05

【中文标题】Chrome 扩展程序创建一个可通过单击浏览器操作访问的 .html 页面。

【英文标题】：Chrome Extensions creating a .html page accessible by clicking browser action.

【发布时间】：2016-06-20 11:09:40

【问题描述】：

我一直在尝试浏览网络，但很难找到答案。我见过一些 Web 扩展程序，例如 OneTab，当您单击 browser action 按钮时会打开一个本地 index.html 页面。有谁知道我如何让我的chrome extension 在按下browser action 时打开 index.html 页面？

【问题讨论】：

有两个不同的步骤：为浏览器操作的 onclick 做一些事情，并让这件事成为“打开本地 html 页面”。两者都不是特别难查找的方法；哪个给你带来麻烦？

【参考方案1】：

你应该看看chrome.browserAction和chrome.runtime.getURL。

manifest.json

    "name": "Your Extension Name",
    "description": "Your Extension Description",
    "version": "0.1",
    "manifest_version": 2,
    "background": 
        "scripts": ["background.js"],
        "persistent": false
    ,
    "browser_action": 
         "title": "Your Browser Action Name"
    

background.js

chrome.browserAction.onClicked.addListener(function () 
    chrome.tabs.create( url: chrome.runtime.getURL("index.html") );
);

【讨论】：

感谢您的帮助。解决了我的问题！

【参考方案2】：

有两种方法可以通过浏览器操作打开本地 HTML 页面。

1。作为弹出窗口

ma​​nifest.json

"browser_action":   
                            "default_icon"  :   "128.png",
                            "default_popup" :   "localPage.html",
                            "default_title" :   "localPage title"
                        

2。作为谷歌Chrome浏览器中的普通页面

ma​​nifest.json

"background": 
        "scripts": ["background.js"]
    ,

background.js

chrome.browserAction.onClicked.addListener(function () 
    chrome.tabs.create( url: chrome.runtime.getURL("localpage.html") );
);

【参考方案3】：

您的问题似乎有两个部分

1。回复browserAction点击事件

    chrome.browserAction.onClicked.addListener(function () 
        // Your code here
    );

2。打开本地html页面

您可以通过chrome.runtime.getURL("index.html")获取本地页面url

然后就可以使用chrome.tabs.create( url: chrome.runtime.getURL("index.html") );打开本地html页面了。