Suppose that 2 extensions are installed in Google Chrome.
1st extension runs content.js on w3.org:
manifest.json:
"content_scripts": [{
"matches": [ "https://www.w3.org/*" ],
"all_frames": true,
"js": [ "content.js" ]
}]
content.js:
alert('content');
2nd extension has page.html, which loads w3.org into iframe:
manifest.json:
"web_accessible_resources": ["page.html"]
page.html:
<!DOCTYPE html>
<iframe src="https://www.w3.org/"></iframe>
Now enter in address bar chrome-extension://2nd-extension-id/page.html. You will see w3.com, but content.js was not running (no alert() window). I do not see errors in console.
The question is: how to permit content script to run in this iframe?
I created Chrome issue. Status: WontFix, unfortunately. But this is can be changed in future...
You can't with extensions but you could do something similiar in Google Apps:
you can use webview instead of iframe. Therefore you can inject script through executeScript method.
Related
I'm writing a chrome extension and I'm having trouble accessing an iframe. I ended up googling this issue and all I got was "security policy" and why the iframe can't be accessed.
In manifest.json "all_frames": true does not help:
"permissions": ["tabs","storage","<all_urls>","activeTab"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js", "raschet.js"],
"run_at": "document_end",
"all_frames": true
}
],
I found a way to disable web security when turning on the browser: --disable-web-security(+ other settings).
If we do this and go to the site with recaptcha https://www.google.com/recaptcha/api2/demo,
after can use the code to click on the captcha:
document.querySelectorAll("iframe")[0].contentDocument.querySelectorAll("div[class='recaptcha-checkbox-border']")[0].click()
Yes it works, but disabling security is not my option.
There are programs for automating work in the browser iMacros and Selenium IDE. These are also extensions with javascript and here they were able to realize focus and click on the iframe.
Exampele iMacros:
FRAME F=1
TAG POS=1 TYPE=DIV ATTR=CLASS:recaptcha-checkbox-border&&ROLE:presentation&&TXT:
Exampele Selenium IDE:
command: select frame target: index=0
command: click target: css=.recaptcha-checkbox-border
Is it possible to repeat the same in my extension using JS or Jquery?
I am trying to do a chrome extension.
What I am basically try to do is implement : document.designMode = ‘on’. I don’t want to always have to go to the console from the browser to do this. I have gone far with building the extension, but the problem is that once I click on it. The script I wrote is just affecting the popup.html file.
It is not affecting the particular site.
Create content.js file;
Inside content.js add JS code to run on site;
Include code to manifest.json:
"content_scripts": [
{
"matches": [
// add site urls where you want to run your extension
],
"all_frames": true,
"js": [
"content.js" // here's your js
]
}
],
"permissions" : [
"declarativeContent"
],
I've got a Google Chrome extension which has the following content script syntax in it's manifest.json:
"content_scripts": [
{
"matches": [
"https://example.com/*"
],
"js": ["js/jquery-2.1.1.js", "js/custom.js"],
"run_at": "document_end",
"all_frames": true
}
],
When testing this extension on an Ember site, it runs on initial page load but after changing the page, it does not get injected again.
For non-Ember users, Ember can update the URL and page content without performing an entire page reload which appears to be causing this issue.
Is anyone aware of a work-around for examples like this?
This was fixed by using chrome.WebNavigation.onHistoryStateChanged which fires every time the page updates.
I'm developing Chrome Extension and I need to load a javascript file to content scripts, but that file is being served via webpack-dev-server. So it's approachable only on localhost.
I tried to change my manifest.json:
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"http://localhost:3000/scripts/content_bundle.js"
],
"run_at": "document_end",
"all_frames": false
}
But then I got an error in Chrome Extensions window:
Only local files can be specified in "content_scripts" section.
Solution:
add "permissions": ["http://localhost:3000/scripts/*", "tabs"] to manifest.json
download the script using XMLHttpRequest (there are many examples) in your background script (or better an event page script) when needed
save it in chrome.storage.local or localStorage (so you can load it on every extension start from the storage without redownloading)
inject the script:
add a tabs.onUpdated listener and inject the script using tabs.executeScript
alternatively use declarativeContent API with RequestContentScript action (despite the warning on the doc page it should be actually supported in the Stable channel but of course do some tests first).
In my web application i want to put a code that upon that execution it should redirect the current tab to some extension page?
If i do
window.location = 'chrome-extension://idgpnmonknjnojddfkpgkljpfnnfcklj';
it redirects me to 'about://blank' not on that particular extension page.
Can some one help me out how to achieve the same.
First of all you need to put all the resources of your chrome extension to the web_accessible_resources.
You also need to trigger redirect behavior. You can do it with content_scripts and you will need permissions for the specific domain.
Eventually you will have mainfest.json like:
"permissions": [
"*://example.com/*"
],
"content_scripts": [{
"js": ["injection.js"],
"matches": ["*://www.example.com/*", "*://example.com/*"]
}],
"web_accessible_resources" : [
"index.html",
"main.js",
"favicon.ico"
],
And injection.js like:
location = 'chrome-extension://'+chrome.runtime.id+'/index.html';