Develop Reference

Chrome Extension Development open extension window from background service

Using: Manifest V3
How do I open my extension same way Metamask does it?
Currently what I have tried is that from my background service I am using chrome.runtime.sendMessage to send message to my content.html and .js of my extension where I have chrome.runtime.onMessage.addListener and listen for the open window message then I tried with chrome.extension.getViews({ type: 'popup' }).forEach(v => v.open()); to display my extension window, but instead it sometimes opens a new empty tab or sometimes I get error Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
What I want to accomplish is that the service worker which is constantly running in background, can open my extension window same way like when I click on extension icon.
Metamask case example: https://youtu.be/vhUjCLYlnMM?t=633
This:
From [ (Service worker) background.js ] open extension window programmatically, same way
as when clicked in the Chrome taskbar on the icon of extension.

You can open it with a new tab on the url in the css and js parts.
<a target="_blank" href="file.url"></a>

I had a similar situation but used a different tactic. Rather then relying on the content script, I am using the options page as the dispatcher.
I am not sure whether this helps in your situation, as I am not sure whether you want to open a new tab or a popup. This works for a new tab, but not for a popup.
Looking at chrome.runtime API, I found only one method that opens a new tab directly: chrome.runtime.openOptionsPage(). For this to work, you need to define an option page in your manifest:
{
"manifest_version": 3,
...
"options_ui": {
"open_in_tab": true,
"page": "options.html"
},
}
Note that the options page must be bundled with your extension. But if you open it in a tab, you can perform a redirect to wherever you want to be, for instance:
window.open("https://www.whereever.com","_self")
If you need to configure the destination, chrome.runtime.openOptionsPage() can take a callback function as an argument, which you can use on the options page to figure out the final destination page(s).

Open a tab and run script

Below doesn’t work:
window.open(‘javascript:{do something here}’)
Some security error and asking for unsafe-inline keywordenter code here
I need to open a new window and navigate to a url and find a button and click it.
All i have are urls(hundreds of em) I’m looping and using promises for each url. The problem is the script doesn’t work because the page is reloaded as the link is clicked. Therefore it needs to be opened in new tab then I can run the script (of clicking button to download) as the link is opened.
var lk=[
{
"key": "www.someurl.com",
"value": "somefile"
},
{
"key": "someurl",
"value": "somefilename"
}];
p=Promise.resolve();
for(i=0;i<lk.length;i++){
p=p.then(new Promise(_=>{
var link = document.createElement("a");
link.download = lk[i].value;
link.href = lk[i].key;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
setTimeout(()=>{
_();
},30000);
}));
console.log('Completed '+i);
}
Above script stops working as page is reloaded on link.click() in chrome console
I tried puppeteer, it has download issues. Any suggestions are appreciated.
Thanks

For security reasons, browsers isolate JavaScript code running on different origins (an origin is the combination of protocol, domain and port). While you can open a page on a different origin (by redirecting, opening a new window or adding a frame on the current page), you can't directly interact with it. So it's impossible for code on one page to open a different page and click on the button on that page.
The only way to work around this in a browser is to write a browser extension or user script. Browser extensions and user scripts are both higher privileged and able to interact with pages that are not under their control, but they need to be installed in the browser, and access to sites needs to be approved by the user (usually during installation).

I am creating another answer because you changed the question.
Don't create a link and then click on it, it will surely break the script due to reloading. instead, use ajax or https://www.npmjs.com/package/fetch. these will call the given URL in the background. but then you will not be able to click the button.
So I would suggest, you create an iframe with the URL, and then maybe try clicking the button.

If this would be possible, it would be a huge security issue. You could use it to lure somebody to your page, then open their online bank in new tab and make a transaction for example.
If you have control over the page you are opening in the new tab then you could pass some query parameter and listen to that parameter in the new page and invoke some javascript if this parameter is set.

If you want to run a script that will trigger a button on a new tab, and that tab is under your control, then you can achieve this by supplying your tab with the following script:
window.onload = function() {
document.getElementById('my-button').click();
}
I would suggest using Jquery Ready Function because it will be triggered once everything on the page is loaded.

Maybe open the URL into an Iframe and then you can control its content. Something like this: Control iframe content with javascript/html
Then you can not only click the button, but you have complete access to its DOM. but make sure X-Frame-Options is not set for that website. otherwise, this option will not work.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
and if that doesn't work:
Then you may want to try:
https://github.com/puppeteer/puppeteer
https://devexpress.github.io/testcafe/
https://www.cypress.io/
These tools are used for automated testing, but you can use these for your purpose.
These tools work like a human click on any button. They themselves open a browser, click on the button and let you know, or download the item or anything.

JavaScript handling and event listeners

This is within the context of an edge extension but it will work with Standard JavaScript.
The extension must;
1 Be able to recognise when a new tab is opened.
2 Replace the new tab with a designated URL rather than about:blank etc.
3 Have links that appear in popups open within the active tab, not a new one.
I have this JavaScript;
function handleCreated(tab) {
var newTabURL = {url: ''};
browser.tabs.update(newTabURL);
}
browser.tabs.onCreated.addListener(handleCreated);
as an example. It does replace the current tab with google but only when a link in the popup is clicked. The link from the popup should be what replaces the active tab OR if the user creates a new tab it should be replaced with mycompany.com/newtab.html, for example.
I've got an unpackaged example with everything so you can see all of the code. To use this you must first enable developer options in MS Edge (Here's how), then you can load the extension.
The extension in its current state has code notes and explains within the UI. You can grab the extension in its current form from this link. You'll just need to download and unzip then load folder within edge. I figured this is easier than me posting all of the code as you can better see how elements interact with each other.
So in summary;
1 The New Tab should open with the custom URL https://mycompany.com/newtab.html.
2 Typing Google should redirect to https://gooogle.co.uk. (Adding word shortcuts with JS in the address bar)
3 Links opened from the popup should replace the active tab that the popup is available over and not open in new tabs.
It works a little bit, I'm just struggling to get the new tab function to work. This isn't intended for the MS store so the policies aren't relevant.
Download the zipped extension folder here.

MS Edge opens links from a popup in a new tab by default, and this tab isn't active.
If for example you had;
<p>Visit Google</p>
the URL would open in a new tab. To open the URL in the tab that is active within the Edge browser you can instead do the following, so it is actually possible.
1 Place the element in a DIV, for example linked content and use <div id="linkedcontent> within your HTML.
2 Place the content that should trigger the new tab within the DIV.
3 Use the following JavaScript to getElementByID and then use .onclick to replace the current browser window.
document.getElementById("linkedcontent").onclick = function() {
var LinkedContent = {url: 'https://google.com'};
browser.tabs.update(LinkedContent);
};
This will then result in the browser window being replaced by the URL specified. In my example it's https://google.com. If you need to do this multiple times just duplicate the code and change the DIV id to something unique for each and reflect this in the JavaScript too.

Click on page from chrome extension

How can a chrome extension click on a button on active page?
There is banal page on the Web. There is simple element of button type with specific ID on the page. Also there is Chrome extension with a button. I'd like to click to extension button and the button in turn clicks to page button.
var someElement = document.getElementById('someElement');
someElement.addEventListener('click', function () {
// here I'd like to click on a button with specific ID.
});

The very first thing you want to do is to read the Overview page, especially the Architecture part. Read it thoroughly, and it will answer many questions you have.
Your problem can be split into two parts.
How to trigger something with a click on your extension.
How to click something inside the active tab.
Before I proceed, I'll reiterate what wOxxOm said: there's a great small example in the docs that does nearly what you want. But if you want to be someone taught to fish, not given a fish, read on.
How to trigger something with a click on your extension
It depends on what kind of UI you're using; the simplest is a Browser Action button.
Simplest button:
If you add a browser action to the manifest without specifying a popup:
"browser_action": {
"default_icon": { "38": "icon38.png" }
},
then clicking on it will raise chrome.browserAction.onClicked event to your extension's pages. The only page open at any time you need it is a background page, the role of which is usually the central dispatch for extension events. So, you need a background page that listens to that event:
"background": {
"scripts": ["background.js"]
},
and
// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// Okay, the actual action should go here
// And look, we already have the required Tab object for free!
});
Variations (exercises for the reader):
If you do specify a "default_popup" in your manifest, then chrome.browserAction.onClicked will not trigger. Instead, a small popup page will open with the HTML file you specify; you can add UI/logic there as you wish, the principle will be the same as normal webpages but with Chrome API access, except:
You'll need to query for the current tab yourself.
You'll need to be mindful of Chrome's extension CSP.
In case you run into problems, you need to know how to debug them.
If your extension targets only a few specific pages, consider using Page Actions instead of Browser Actions.
As noted in the documentation, Event pages are preferable to Background pages. In this case, you can use an Event page easily without any side effects, but in general this may require some thinking.
You could inject your own UI into the page itself with Content scripts; this is an advanced topic and will not be covered here.
How to click something inside the active tab
Since you've read the Architecture overview, you already know that the only part of the extension that can interact with the DOM of an open page is a Content script.
Content scripts can either be specified in the manifest (and then they will automatically be injected and ready for you when a matching page is opened), or they can be manually injected into the page.
In your case, you want to do something simple, and only when clicked. This is a perfect job for programmatic injection, so we'll stick with that.
Assuming the solution from the previous section, you are in a context of a background page and already have the current tab as the tab variable:
// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// Do something with tab
});
Programmatic injection is done with chrome.tabs.executeScript method. At a minimum, you need to specify the tab you want to inject to, and the code that will be run:
// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {
code: "document.getElementById('#specificId').click()"
});
});
That's not all yet though. The extension must have permissions to execute code in an open tab.
You could use "host permissions" that are defined by a match pattern to give access to specific pages, but remember that we are only triggering it when the user clicks the extension.
For that specific case, there's a special permission "activeTab". It is sufficient to do a lot of things with the currently active tab when the extension is explicitly invoked, and clicking its button is explicit enough.
So, add to manifest:
"permissions": ["activeTab"],
And that should be all you need for this to work.
Extra credit:
While not necessary for this simple purpose, you may want more complicated code than a single line to be executed in the tab. Then it makes sense to use a separate file and invoke executeScript with "file" instead of "code".
Just triggering a click on a button does not require you to directly interact with JavaScript running in the page itself, as DOM events are shared. However, it's important to understand that normally, content scripts can't interact with the page's own scripts, which is called "isolated world". There are ways to bypass it if you really need it, but it's an advanced topic better explained elsewhere.
Sometimes you need the content script to persist, answer some commands and maybe send its own queries to the extension's pages. In that case, it's probably better to auto-inject through the manifest and use Messaging instead of executeScript.

How to trigger browserAction popup of chrome extension from page? [duplicate]

I am trying to write a JavaScript function that will open my extension like when the extension icon is clicked. I know how to open my extension in a new tab:
var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);
But I want to open a pop-up in the upper right corner of the browser, like when the extension icon is clicked.

The Chromium dev team has explicitly said they will not enable this functionality. See Feature request: open extension popup bubble programmatically :
The philosophy for browser and page action popups is that they must be triggered by user action. Our suggestion is to use the new html notifications feature...
Desktop notifications can be used progammatically to present the user with a small HTML page much like your popup. It's not a perfect substitution, but it might provide the type of functionality you need.

Chrome team did create a method to open the popup programmatically, but it's only enabled as a private API, and plans to make it generally available have stalled due to security concerns.
So, as of March 2018 as of now, you still can't do it.

Short answer is that you cannot open browserAction programmatically. But you can create a dialog with your content script which emulates your browserAction and display that isntead (programmatically). However you won't be able to access your extension's background page from this popup directly as you can from your popup.html. You will have to pass message instead to your extension.

As mentioned there is no public API for this.
One workaround I have come up with is launching the extension as an iframe inside a content script with a button click. Whereby the background script emits the extension URL to the content script to be set as the iframe's src, something like below.
background.js
browser.runtime.onMessage.addListener((request) => {
if (request.open) {
return new Promise(resolve => {
chrome.browserAction.getPopup({}, (popup) => {
return resolve(popup)
})
})
}
})
content-scipt.js
const i = document.createElement('iframe')
const b = document.createElement('button')
const p = document.getElementById('some-id')
b.innerHTML = 'Open'
b.addEventListener('click', (evt) => {
evt.preventDefault()
chrome.runtime.sendMessage({ open: true }, (response) => {
i.src = response
p.appendChild(i)
})
})
p.appendChild(b)
This opens the extension in the DOM of the page the script is running on. You will also need to add the below to the manifest.
manifest.json
....
"web_accessible_resources": [
"popup.html"
]
....

You could emulate the popup by displaying a fixed html element on the page in the same location the popup would be and style it to look like the popup.

I had the same requirement: When the user clicks on the extension icon a small popup should open. In my case, I was writing an extension which will give updates on selective stocks whenever the icon is clicked. This is how my popup looked.
If you were having the same requirement then please read the answer below.
This is how my manifest.json file looked.
All the heavy lifting was handled by manifest.json file only. There is a section browser_action inside which there is a key called default_popup, just put the name of the HTML file that you want the popup to display.
I wanted my extension to work on all the pages that's why I added the attribute matches under content_scripts. I really didn't need to put the jquery file jquery-3.2.1.js inside the js array but the extension manager was not allowing me to keep that array empty.
Hope this helps, do comment if you have any doubt regarding the answer.