Can a Browser Action have an action triggered and a popup window opened both at the same time?

Question

I am working on an extension and would wish to change the popup.html from my Background.js...

here is the part in background.js

       popup=chrome.extension.getViews( {type:"popup"});
        html2="Hello World 2";     
        window.onload=function(){popup[0].document.innerHTML="Hello World 2"};
    }
}

Can you please provide us whole error including line number? — Sebastian Kaczmarek, Dec 09 '16 at 14:04
Uncaught TypeError: Cannot read property 'document' of undefined(…) background.js line number 20 — Eminem347, Dec 09 '16 at 14:05
The console is pointing you to the error: The line `popup.onload.document.innerHTML("hello World")`makes little sense. What are you trying to do? — Iván Nokonoko, Dec 09 '16 at 14:09
@IvánNokonoko I have replaced it...I am trying to get the window of the popup object and change its inner HTML if a particular condition is satisfied — Eminem347, Dec 09 '16 at 14:16
@SebastianKaczmarek Line 20 the error now after edits is
background.js:20 Uncaught TypeError: Cannot read property 'innerHTML' of undefined(…) — Eminem347, Dec 09 '16 at 14:16
innerHTML is not a function. `chrome.extension.getViews` returns an array. You may want to try something like: `popup[0].document.innerHTML = "Hello World"`. Apart from that, review asynchronous concepts in Javascript. — Iván Nokonoko, Dec 09 '16 at 14:29
Please [edit] the question to be on-topic: include a **complete** [mcve] that *duplicates the problem*. Including a *manifest.json*, some of the background/content/popup scripts/HTML. Questions seeking debugging help ("**why isn't this code working?**") must include: ►the desired behavior, ►a specific problem or error *and* ►the shortest code necessary to reproduce it **in the question itself**. Questions without a clear problem statement are not useful to other readers. See: "**How to create a [mcve]**", [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. — Makyen, Dec 09 '16 at 15:07
I would suggest that you read the [Chrome extension architecture overview](https://developer.chrome.com/extensions/overview#arch) (and perhaps work through reading the pages linked from there). It has overall architecture information which should help your understanding of how things are generally organized/done. — Makyen, Dec 09 '16 at 15:11
One of your multiple problems is covered in: [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron). — Makyen, Dec 09 '16 at 15:13
What popup are you attempting to find with `chrome.extension.getViews({type:"popup"})`? You have shown nothing that creates a popup. Thus, your `getViews()` is probably returning no valid results. — Makyen, Dec 09 '16 at 15:29

Iván Nokonoko · Accepted Answer · 2016-12-09T15:58:38.470

According to the documentation, the browserAction icon can either have an action triggered OR a popup window opened, but not both simultaneously. You can switch between one or the other programmatically, but never have both work at the same time.

The listener defined in chrome.browserAction.onClicked.addListener will NOT be called if you have a popup.html file defined in your manifest.

On the other hand, if you want to programmatically modify the HTML of the popup window, you can do so only when the popup window is open, so you either include the code in the popup.js file itself, or you use chrome.runtime.getBackgroundPage to access the background window object and call the code you already had there.

For example:

background.js

var $username = "noname", $password;    

function modifyMyPopup(){
    var popup = chrome.extension.getViews({type:"popup"});  //get the open popup windows
    for (var i = 0; i < popup.length; i++)  //check all open popups
        if (popup[i].popupMarker)  //if it is our browserAction popup...
            popup[i].document.body.innerHTML = "Hello" + $username;  //modify its body's innerHTML
}

chrome.storage.sync.get(["username","password"],function(items){  //you can get several items at once from the storage
    $username = items.username;
    $password = items.password;
});

popup.html

<html>
<head>
<script src="popup.js" defer></script>
</head>
<body>
Goodbye!
</body>
</html>

popup.js

var popupMarker = 1;    
chrome.runtime.getBackgroundPage(function(bgPage){
    bgPage.modifyMyPopup();
});

While you have covered the most likely issue, because we do not have a complete [mcve] from the OP, you need to also account for the possibility that the OP has separately opened a popup window that is not a browser action popup. — Makyen, Dec 09 '16 at 15:28
@Eminem347 $username takes the value stored in chrome sync storage. If there is no value there, it will be undefined — Iván Nokonoko, Dec 09 '16 at 15:56
@Eminem347: The fact that $username is undefined at the time you are trying to use it is the issue that is covered in [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron). — Makyen, Dec 09 '16 at 17:11

jean-max · Answer 2 · 2016-12-09T14:44:17.573

-1

popup is not define in your else statement. You should do it outside if else statement like this :

popup = chrome.extension.getViews({type:"popup"}); 

if (typeof $username === 'undefined') {
    window.onload = function(){popup.document.innerHTML = "Hello World"};
} else {   
    window.onload = function(){popup.document.innerHTML = "Hello Wolrd 2"};
}

edited Dec 09 '16 at 14:44

answered Dec 09 '16 at 14:16

jean-max

1,640
1
18
33

Yeah Changed it stil the same error---
background.js:20 Uncaught TypeError: Cannot read property 'innerHTML' of undefined(…)window.onload @ background.js:20 – Eminem347 Dec 09 '16 at 14:19
1

Review the [documentation](https://developer.chrome.com/extensions/extension#method-getViews): chrome.extension.getViews returns an array, not a window object. – Iván Nokonoko Dec 09 '16 at 14:25
Returns an array of the JavaScript 'window' objects for each of the pages running inside the current extension....@IvánNokonoko – Eminem347 Dec 09 '16 at 14:28
@Eminem347 I edit my response, can you test it. As Ivan says, it's an array so you have to go through it to access the window value – jean-max Dec 09 '16 at 14:30
@Jean-maximeBouloc yeah i tried..same error background.js:20 Uncaught TypeError: Cannot read property 'document' of undefined(…) – Eminem347 Dec 09 '16 at 14:34
@Eminem347 can you make a `console.log` of `popup` ? – jean-max Dec 09 '16 at 14:37
1

Most probably `chrome.extension.getViews({type:"popup"})` returns an empty array because there is no popup window open when the code runs. – Iván Nokonoko Dec 09 '16 at 14:38
@IvánNokonoko that's what I think too – jean-max Dec 09 '16 at 14:39
@Jean-maximeBouloc I am not giving any input to console.log() of popup So it is blank... – Eminem347 Dec 09 '16 at 14:39
1

And `innerHTML` is not a function. Do not try `innerHTML("Hello")` but something like `innerHTML = "Hello"`. – Iván Nokonoko Dec 09 '16 at 14:39
The popup window is created when the user clicks on the browserAction icon. If you don't click on the icon, there is no popup window object, even if it is declared in the manifest. – Iván Nokonoko Dec 09 '16 at 14:43
@Eminem347 and with this : `popup.document.innerHTML="Hello World 2"` – jean-max Dec 09 '16 at 14:43
@Eminem347 $username takes the value stored in chrome sync storage. If there is no value there, it will be undefined. – Iván Nokonoko Dec 09 '16 at 15:55
@IvánNokonoko Thanks a million...aspire to code like you someday :p..Thanks for your tremendous help..I don't know why someone demoted my question when it was genuine.. – Eminem347 Dec 09 '16 at 15:57

Can a Browser Action have an action triggered and a popup window opened both at the same time?

2 Answers2