CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
T. Borges
T. Borges

Reputation: 13

Open popup.html when click in extension icon

I started studying javascript today and I'm trying to do a google chrome extension. I want to open a new tab with the main html (popup.html) when I click in the extension icon.

I'm having trouble with this because I changed it so much and keep poping up a hundred of new tabs.

Here's my manifest:

{
    "manifest_version": 2,
    "name": "Youtube Autoplay",
    "version": "0.1",
    "description": "Autoplay selected YouTube videos from my browser",
    "browser_action":{
        "default_title": "Youtube Autoplay",
        "default_icon": "icons/icon16.png",
        "default_popup": "popup.html"
    },
    "permissions": [
      "tabs"
    ],
    "background":{
      "scripts": ["popup.js"]
    }
}

Here's the function that I'm using to open new tab

chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {
  // Tab opened.
});

I found some old awnsers here, tried some and still getting the problem.

Upvotes: 0

Views: 3030

Answers (2)

Haibara Ai
Haibara Ai

Reputation: 10897

I guess you also include popup.js in your popup.html, which means popup.js is referred by both event page and popup page.

When the event page is called after you installed the extension, it will call chrome.tabs.create to create a new tab with url popup.html, and popup.html will also call chrome.tabs.create because there is a script tag referring popup.js in popup.html. Then it will result in an indefinite loop and many tabs would be opened.

Considering you want to implement "clicking extension icon then opening a tab with popup.html", you could register browserAction.onClicked event listener in event page and call chrome.tabs.create to create the new tab. Sample code would look like the following

manifest.json

{
    "manifest_version": 2,
    "name": "Youtube Autoplay",
    "version": "0.1",
    "description": "Autoplay selected YouTube videos from my browser",
    "browser_action": {
        "default_title": "Youtube Autoplay"
    },
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    }
}

background.js

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

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

Upvotes: 0

Siddharth
Siddharth

Reputation: 7156

Add an onClicked listener on browser action(extension icon):

background.js

chrome.browserAction.onClicked.addListener(functiont(tab){
  chrome.tabs.create({'url': chrome.extension.getURL('popup.html')},function(tab) {
  // Tab opened. 
 });
})

NOTE :

onClicked listener will only run when extension does not have a popup. So remove "default_popup": "popup.html" from manifest.json. Also you need to add popup.html under web_accessible_resources "web_accessible_resources": ["popup.html"]

Upvotes: 3

Related Questions