Connect from popup.html to background.js script in Chrome Extension

Question

Connect from popup.html to background.js script in Chrome Extension. When I click on the button, I want the background script to open a new tab.

Background Script:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {    
    if (message == "output") {

       var win = window.open('https://www.google.ca/webhp?hl=en&sa=X&ved=0ahUKEwjesaKd26TcAhWNw4MKHcN-CwgQPAgD', '_blank');
       win.focus();    
    }    
});

HTML:

<body>
    <script src="next.js"></script> 
    <input id="output" type="button" value="Go To Alternative Forum"/>
</body>

 document.getElementById("output").addEventListener(("click"),function(){

        chrome.runtime.sendMessage("output"); 
});

Can you clarify your question and code in the post body? Consider using a code snippet. — ggorlen
– ggorlen, Commented Jul 18, 2018 at 21:39
my bad. its my first time. just did. and its regarding a chrome popup.html extension. — Digital Pain
– Digital Pain, Commented Jul 18, 2018 at 21:59

Abdul Jabbar · Accepted Answer · 2018-07-19 17:03:30Z

2

You can do that by window.open.

But if you want to do connect your html to background.js, then the official way is to send the message from your script next.js to the background.js and then background.js will create new tab to open the link.

Following code will work in your case:

next.js

 document.getElementById("next").addEventListener("click",function(){

        chrome.runtime.sendMessage({type: "openTab",value:code},function(response) {

        });

    });

popup.html

<body>
    <script src="next.js"></script>
    <input id="next" type="button" value="Go to google" />
</body>

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

    if (request.type == "openTab") {

        chrome.tabs.create({"url": "http://www.google.com", "selected": true}, function (tab) {

        });

    }

});

edited Jul 19, 2018 at 17:03

answered Jul 19, 2018 at 6:48

Abdul Jabbar

5024 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Digital Pain Over a year ago

this code makes alot more sense. however, i am unable to connect my html to the next.js. the addEventListener dosen't connect. but thank you

Abdul Jabbar Over a year ago

I apologize. There was an error in eventlistener line. I've updated the code. It should work now.

Digital Pain Over a year ago

i feel it nessary to imply that the next file is not the content script. do i need to add anything to the manifest.json.

user9085934 · Accepted Answer · 2018-07-18 22:44:50Z

1

Your script reference in your code should have a src="" attribute instead of a href="". Example here:

HTML:

<body>
    <script src="next.js"></script>
    <input onclick="start();" type="button" value="Go to google" />
</body>

next.js:

function start() {
    var win = window.open('https://www.google.ca/webhp?hl=en&sa=X&ved=0ahUKEwjesaKd26TcAhWNw4MKHcN-//CwgQPAgD', '_blank');
    win.focus();
}

answered Jul 18, 2018 at 22:44

user9085934

1 Comment

Digital Pain Over a year ago

thanks that helps. but i dont think the popup.html can connect to the background script. due to the fact its a chrome cast. thanks tho

Collectives™ on Stack Overflow

Connect from popup.html to background.js script in Chrome Extension

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related