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).
Related
I'd like to use the popup of an extension to set settings that make changes on about:blank pages html one is on (from Google Slide Presenter in a separate tab), in terms of how the extension is supposed to behave on that page.
As far I understood I need to use content_scripts due to about:blank which requires "match_about_blank" : true as otherwise I have not way to run javascript on that page via the extension, unless there is a way using executeScript?
Is it possible from within the popup to access the HTML of that open tab using content_script?
I.e. I'd like to retrieve the tabs page title, i.e. using document.title or extract from the HTML. Also with Javascript I'd like to change some of the content within a div.
The only workaround I can think of, unless its the only way, is to run javascript on the page to extract and store the value (chrome.storage.sync.set) so I can retrieve it in the popup with javascript (chrome.storage.sync.get).
Wondering if there is a better way directly and also how to change content in the tab i.e. by clicking a button in the popup (maybe via event listener on the tab and a push from the popup?).
I already tried the answer using chrome.scripting.executeScript. with Manifest v3 but couldn't make it work. How to access the webpage DOM/HTML from an extension popup or background script?
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.
I've done some looking around and couldn't find any solution to this problem.
I'm creating a Chrome extension, with a manifest that points to the opening file home-times.html. This works, though I want to redirect it internally to the other page home-welcome.html inside the extension so it loads another page INSIDE the extension.
I've read a lot of questions that refer to changing the current tab's page, though that's not what I am after.
Tests
By using the following code:
test
Opens a new tab, with the extensions page that I am trying to access in that new tab.
If I got you right, you want to change your popup innerHTML, in this case I suggest using jQuery, to change original file to the result you want.
If you just want to open new tab, with your home-welcome.html, you can do this, in your popup.js :
window.open('home-welcome.html','_blank')
If none of this is what you are looking for, can you please provide an example, I will try to help.
I'm trying to use jQuery to modify an element that's "injected" externally. I've tried delegation with on but it didn't work.
Here's the page, scroll down and you'll see an avatar named "Sebastian" with <div class="Avatar">.
If I go right click, Console and type: $('.Avatar'), the element is identified, but this is only because I first clicked on "Inspect element" for that element. jQuery somehow "updated" the source and now it identifies the element.
Now, try to refresh the page and type $('.Avatar') again, jQuery will not identify the element (although it's already loaded on the page).
You can take a look under "A working example" how this script is injected into the page.
My question is, is it possible (and if so, how) to modify this HTML (which seems to be inserted dynamically as the page is loaded)? It doesn't seem to be using any sort of iFrame nor anything, it just dynamically loads into the page, yet jQuery is unable to recognize it (unless you "tell it" to do so by clicking on "Inspect element" on the actual element).
P.S. I've tried using on, delegate, it doesn't work.
jQuery will not identify the element after page because it's in another iframe.
You said "It doesn't seem to be using any sort of iFrame nor anything", but in the end it's iframe.
The reason why you can find it when you go right click on element and then in developers tools you write $('.Avatar') is because once you inspect element (right click) inside developer tool iframe will change.
Furthermore, your parent iframe and iframe that have avatar element have same origin. Run document.domain inside parent and other iframe. Iframe with avatar have origin "app.talkjs.com" and parent iframe have origin"talkjs.com".
Subdomains may be same-origin.
There’s a small exclusion in the “Same Origin” policy.
If windows share the same second-level domain, for instance john.site.com, peter.site.com and site.com (so that their common second-level domain is site.com), they can be treated as coming from the “same origin”.
https://javascript.info/cross-window-communication
You should be able to catch onload iframe event and then search for .avatar.
iframe.onload = function() {
let newDoc = iframe.contentDocument;
console.log(newDoc.getElementsByClassName("avatar");
};
Using the latest version of Chrome on Mac OS 10.7.
I assume it is some clever javascript that is enabling the folks at this webpage:
http://www.chairworks.com/
...to close my (the parent) page which opened their (chairworks.com) page in the first place.
I did not open them with javascript, but with an <a> tag with the target="_blank" attribute.
If I disable javascript, then the behavior stops.
www.chairworks.com
I would expect the page at chairworks.com/ to simply open in another tab/window... but what I find is that as soon as the new browser tab opens, it closes, and then my page (the parent tab/window) gets redirected to the chairworks.com page.
Kinda rude.
Can someone point me to what code enables them to do that? And how do I prevent it? (Assuming I want a link to behave as expected, such as in my demo page.)
I believe the proper thing to do is set corresponding link type attribute so the browser doesn't provide the target window with and opener reference.
Link
You can read more about link types here: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
This is the script they are using:
setTimeout('redirect_page()',0);
function redirect_page(){if (window.opener) { window.opener.location.href = '/home.html'; window.close(); } else { location.href = '/home.html'; }}
As to how to circumvent it (just an idea):
Create your own blank page, with it's source set to about:blank. When it loads (or after a time-out) you could write some code to that window that will then open the offending link.
Then the offending link just closes your buffer-page. F*ck 'm!! Power to the user!
Edit: looks like you could also name your page home.html hehe, but that is not such a workable solution..
Final Edit: SIMPLE LOGIC people...
www.chairworks.com
works for everyone, no javascript needed.
See this working jsfiddle example.
As #GitaarLAB explained, the targeted website is using the window.opener property to get access to your page. Using some Javascript yourself, and an about:blank page in the middle, can help you cut their access to your page. It would be like:
http://www.chairworks.com/
Some notes:
I'm leaving the href property there for users without JS enabled (guess what! the targeted website won't have JS neither! ;), or the web crawlers like search engines' (only those who don't care about JS stuff, though)
Before redirecting to the targeted website, you cut the back-link by resetting the window.opener attribute of the new window.
And after opening the targeted website, there's a return false; to prevent the normal the browser to use the href and target attributes.