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.

Page Monitor Bookmarklet That Clears Cookies or Cache After Each Reload

Okay I changed the plan. How would I create a bookmarklet that refreshes a link and clears cache until a page change is detected?
Edit: this might help (from JavaScript Bookmarklet; click button, reload page, then open page):
If a page reloads, any code currently running on that page, including code from a bookmarklet, is ended and removed. Traditionally bookmarklet code ceases to work after a page load and user clicks it again.
There are three workarounds that I know of.
A.) Change the process that loads the page to instead use AJAX.
B.) Change the process that loads the page to instead open a new window, and then use JavaScript to manipulate the new window.
C.) Before triggering the page load, open a new child window and insert code into it. The code in that child window can then monitor its parent and take actions on the parent even after the parent has reloaded.
Edit 2: this refreshes the page, so now I just need to clear cache on each refresh and stop when a page change is detected (overall function is like a page monitor but clears cache after each refresh).
---or----
javascript:
timeout=prompt("Set timeout [s]");
current=location.href;
if(timeout>0)
setTimeout('reload()',1000*timeout);
else
location.replace(current);
function reload(){
setTimeout('reload()',1000*timeout);
fr4me='<frameset cols=\'*\'>\n<frame src=\''+current+'\'/>';
fr4me+='</frameset>';
with(document){write(fr4me);void(close())};
}
Edit 3: found this for clearing cookies (which should be sufficient):
Edit 4: this checks for page changes:
Now how do I put this together?

Javascript redirecting on everypage can't remove

I have a javascript file that was accidentally added to the admin side of our site. The javascript is below,
<script>
if (document.getElementById("errorTitle") != null && document.getElementById("errorTitle").innerHTML === "Insufficient Privileges") {
window.location.replace("/portal/InsufficientPrivileges");
} else {
window.location.replace("/portal/FileNotFound");
}
</script>
The problem is that this code runs on the admin pages so we are unable to remove it. If we disable javascript on the browser the page never renders, dynamic content. How can we disable this from running so we can upload the proper file?

You might be able to edit the page that contains the reference to the problem file. If you can just edit the page to jump over where that code is called with an if statement or goto.
If you can't edit the other pages then you can Use the debugger to change the code executed on the fly. Chrome and Firefox have debuggers that should be able to do this.
Specifically for Chrome you go into the object inspector (available via menus or right clicking on the page). Then you can see the HTML on the left window. You select the script tag of interest, you can right click and select delete or select "Edit HTML"

If the page redirects you before you're even able to edit anything, you can use automated tools.
Fiddler (Windows)
Fiddler lets you see all pages downloaded, and then you can have it send your browser a different page when it tries downloading any page you specify (AutoResponder feature). This way you can temporarily edit a page while you can fix it in the admin panel.
Greasemonkey (Firefox) or Tampermonkey (Chrome)
These plugins let you run JavaScript code on a page as soon as it gets to your browser. This will let you do things such as removing the script tag programmatically.

Setting about:blank as the source of an iframe has side-effects in IE

I have a JS code that creates a hidden iframe, with src="about:blank" (so that I don't load the content of the iframe if the user won't click to open it), and when the user wants to see the content of the file, I simply change the src of the iframe.
The whole code would be too much to paste, but the gist of it is:
// executed on document ready
iframeView = document.createElement('iframe')
iframeView.src = "about:blank"
// executed when the user clicks the button to show the iframe
iframeView.src = "http://example.com/some-url
However, sometimes (the keyword being sometimes -- ie. about 4/5 of times), on IE the page inside the iframe throws an error and doesn't execute any JS on that page:
Origin about: not found in Access-Control-Allow-Origin header.
I'm figuring that this has something to do with the about:blank that I'm setting on pageload. But why? And why only on IE?
Edit: Tried setting the src="", that got rid of the error, but the JS on the iframe content page is still not running.

Inserting DOM element while page is loading, not afterwards

I am working on a chrome extension, that inserts a div into the body element of the dom. Right now I am creating an event handler that fires on load to create the element. This means of course that the page loads completely, and then my div is inserted, which means the user sees the page without the div until loading is complete, and then the div pops up. I would like the div to be there while the page is loading. Is there a way to hijack the body element before any other elements have been written? Or do I have to somehow hide the content until everything has loaded, which of course would mean that the user sees a blank screen for a while.
If at all possible, I would like to avoid jQuery.

I'm not 100% sure, but looking at the Chrome extension developer guide, it looks like if you are using a Content Script and specify the run_at field in your extension's manifest as document_start, then it should inject the files before the DOM is constructed.