We Keep Coding

I can't access the web page DOM from a Chrome Extension pop up

I am struggling to access the DOM of the web page for my Chrome Extension.
In one extension I made, my extension parses the DOM from the content.js file without issue. This happens as the page loads. The user does not need to interact/open the extension at all, it just needs to be running in the backgorund.
Now I'm trying to trigger this from a button. This means the user will click the extension icon in the browser, and the popup.html will show some HTML (including the button).
This is where the problem lies for me. When I now try access the DOM (via click event of the button), it shows the popup.html's DOM, not the web page (The active tab).
So, a quick look through the docs (which I'm open to admit I struggle with) show that it could be a permissions issue. In my manifest.json file, I added
"permissions": [
"activeTab"
],
This didn't help :(
So in this new extension, I'm not using the background.js nor content.js .. I guess this is the problem, as the javascript I'm calling is embeded in the HTML pop up! This makes sense to me (as to the behaviour I'm getting).
How do I access the DOM of the active tab from the HTML pop up

The only way of accessing a page's DOM is by using a content script. Since you've set the activeTab permission you can use chrome.tabs.executeScript to inject a content script into the active tab by omitting the first parameter (the tabId).
Here is an example:
chrome.tabs.executeScript({ file: "content.js" });

I have had this same issue, I click on the button to open an popup, then how do I access the contents of the popup. Yes, you will need to use content scripts, but a trick I done to accomplish this, was when the popup is open, use window.name and get the name of that window. Then you can reference that popup window by var test = window.name('', 'name of that window'). Then you can reference the dom elements of the popup from test. Worked for me, let me know if I need to include some code to better explain.

How to get reference to a pop up window and load a javascript file in it?

In SharePoint 2010, there is a button to open a popup window (its for alerts). However it doesn't use the conventional way to open a popup window like window.open, it calls a SharePoint function, which results in a pop up window opening. Now is there a way I can load a JavaScript file (.js file using a script tag basically) in it? I figure I would need to get a reference to that window somehow, and then append a script tag in it or something.
Note: I can't modify the actual file popup window page. I just want to dynamically insert the JavaScript in it programmatically.

It depends on how the SharePoint function opens the window. Unless it opens it as an assignment to a variable you can access for reference, then there's no way to access it. Chances are you are going to need to modify the SharePoint function to do this and return that reference or else make it a globally scoped variable you can then reference. Also, the target window will have to be the same domain as the parent page.

Open .html page within same window only once. File run locally

I have a html file that will be run locally using IE. I want it to function more like an app, it will not be published to a site, I'm only using IE to view it. The code that follows will provide basic functions to do simple calculations. I've not been able to successfully use the window.onload event to create a new window that removes the scroll bar, title bar, menu, etc without it looping. I'm not sure if an If statement or a while statement is best for testing if the page is already open to stop the loop and I'm having a hard time understanding the syntax of how to test if the window.onload already has the window open. I guess I'm looking for some guidance on setting this up or a reference easily understood by a beginner. Thank you.
I at present have two html files. The first, its only purpose in life is to trigger the second to load as I want it to show.
function openWindow()
{
window.open("CouchShifts.html", "", "status=no,toolbar=no,menubar=no,navigationbar=no,location=no,resizable=no,scrollbars=n, width=440,height=200'");
}
window.onload = openWindow()
window.close("test.html")
I had tried to incorporate this idea into the original html file without success. Any starts on how to better handle this so that when the standalone html file is double clicked from the desk top it open as specified above only once without looping?

It's not wise to check window is open or not in the same windows onLoad. You should check it rather in the event that actually opens the window.
Here are some solutions for this.
Check if window is already open window.open
https://stackoverflow.com/a/10467344/672455

Can Chrome extension content scripts access window.opener?

In my extension, I'm trying to determine whether a new tab was created as a popup by another tab and if so, which tab.
I thought I would be able to use window.opener from a content script to help figure this out. But it looks like window.opener doesn't work correctly in content scripts.
When I create a tab manually, it's window.opener is null as expected.
When a tab is created as a popup by another tab, its window.opener is undefined. I can infer from this that the tab was created as a popup, but I can't use it to figure out which tab created the new one.
Is this a known issue, and does anybody know of any workarounds?

I didn't look closely into this problem, but I think I can point you in the right direction. Content script can't access a variable from a parent window because it is sandboxed. A workaround would be to run your code directly on a page, to do this you need to inject your script inside a script tag:
Your content script would look like this:
function injectJs(link) {
var scr = document.createElement("script");
scr.type="text/javascript";
scr.src=link;
(document.head || document.body || document.documentElement).appendChild(scr);
}
injectJs(chrome.extension.getURL("inject.js"));
Now you can run your code without sandbox restrictions as if it was right on the page:
inject.js:
alert(window.opener);
I assume you would like to now pass this information back to a background page, which is another challenge as you can't use Chrome API. Good news is that content script can access DOM and listen to DOM events, so you can use them to pass information to a content script which would send it to a background page. I am pretty sure you should be able to register a custom DOM event and have your content script listening to it (haven't tried this part myself).

How do I open a webpage and run some javascript functions?

Hi I would like to open a page and then run some javascript functions. My problem is that once I open the window it stops running the code:
javascript:
location=("http://www.myTestPage.com/");
showForm();
document.getElementById("txtEmail").value="test#hotmail.com";
submit();

You can't. The problem is that each page is loaded into its own logical window (even if that window occupies the same client area in the browser as the previous page). Each window runs script in its own context. Usually when windows are replaced any running script is terminated and even if it weren't I suspect you want the code following the location assignment to operate on the new content.
You would need the target page to run your code for you. If the page is generated dyanmically by something like PHP or ASP then you could use the query string to specify a file that the page should point the SRC of a script block it puts at the bottom of the body content.

It's because your javascript functions are declared in the window object. By calling location= you destroy the current window object and all the function in it. After all you cant declare function in one window to run in the same same window but with another location. All you can do is toopen a new window.

It is because the page has transferred to a new location. Execute your javascript first before you move to another location.

location=("http://www.myTestPage.com/") starts the navigation to the new page. Where do you intent for showForm() to be called from? If it's the current page, I don't get why you want to do that?
This will following though I doubt you want to open a new window, yea?
window.open("http://www.myTestPage.com/");
showForm();
document.getElementById("txtEmail").value="test#hotmail.com";
submit();
To Add:
I think you wanted to submit the form to for server-side process and also navigate to the new location at the same time. Few ways to do it:
Submit the form, and let the response redirect to the desired location
Submit the form asyncronously, after that navigate to new page

This is only possible in JavaScript if you open the second page in a new window and that page is hosted on the same domain (since JavaScript has a same-domain security policy); otherwise, you'll have to do as some others have suggested and have the target page handle it itself.