Chrome Extension: onclick extension icon, open popup.html in new tab
I have created a chrome extension and managed to open the popup.html file using window.open. however I want to open it in a new tab, I've tried lots of different ways including:
<script type="text/javascript" language="JavaScript">
chrome.tabs.create('url': 'popup.html');
Am I just placing the code in the wrong 开发者_如何学JAVAplace or is it the wrong code altogether?
why would you want to open the popup.html in a new tab? You should create a different page for that. Anyways, if you want to open up the popup.html, in a new tab, you would need to pass in the extension url.
http://code.google.com/chrome/extensions/extension.html#method-getURL
chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {
// Tab opened.
});
Now you can use Event Pages to open popup.html in new tab when extension icon is clicked without creating a default_popup page.
manifest:
"background": {
"scripts": ["background.js"],
"persistent": false
}
js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': chrome.extension.getURL('popup.html'), 'selected': true});
});
Use chrome.tabs.create(Object properties, function callback) as described on http://code.google.com/chrome/extensions/tabs.html
The object properties could contain fields for windowId, index, url and selected. The optional callback function receives a Tab object of the newly created tab.
So the simplest example to create a new tab in the current window and get it selected would look like this:
chrome.tabs.create({'url': chrome.extension.getURL('popup.html')});
Not sure why you would like to show the popup.html in a new tab, but I find it very useful while developing/debugging my extension ... it is quite a pain that on the extension page there is "usually" only a link to the background page.
Would love to know how to open it in a new window and maybe in a kiosk mode ;-)
One complete, worked example:
Manifest.json
{
"manifest_version": 2,
"name": "HelloWorld",
"version": "0.0.1",
"description": "This is HelloWorld",
"author": "BaiJiFeiLong@gmail.com",
"browser_action": {
},
"background": {
"scripts": [
"background.js"
]
}
}
background.js
// Created by BaiJiFeiLong@gmail.com at 2022/4/13
chrome.browserAction.onClicked.addListener(async () => {
await chrome.tabs.create({url: chrome.extension.getURL("popup.html")});
})
popup.html
<!--Created by BaiJiFeiLong@gmail.com at 2022/4/13-->
<body style="min-width: 500px">
<h1>Hello World</h1>
</body>
加载中,请稍侯......
精彩评论