I am developing a FF addon recently. My addon will download some configuration files before the contentScriptFile been evaluated. My code is like this:
panel.on("show", function() {
var url = "http://domain/config.js";
request({
url:url,
onComplete: function(response) {
worker = tabs.activeTab.attach({
contentScript:response.text,
contentScriptFile: [data.url("js/do1.js"), data.url("js/do2.js")]
});
...
}
})
}
But as your document has said that contentScriptFile will be run before contentScript, so if I do want to run contentScript first, how should I do?
I have tried to attach twice, first attach contentScript only, then attach contentScriptFile, but not success.
Thank you for your time.
You must not execute remote scripts in a privileged context, or execute insecure remote scripts in a potentially secure context. What you're asking fails both:
Executing remote scripts in a somewhat privileged context, namely a content script, which has some privileged capabilities regular web site scripts have not.
Execute an insecure http:// script (you gave that in the example), in the current tab, which might be https://. This would allow Man-in-the-Middle attacks. (Even if you served your "config" from https, the add-on site would still reject your submission, BTW, because it cannot be reviewed as the active content is not complete).
So, effectively, you got two security vulnerabilities, both of which can and should make your add-on end up on the blocklist.
However, you can retrieve your configuration using a non-active/non-executable format, such as JSON or XML (or plain text, if you like).
Passing these configuration values can be achieved by
using either contentScriptOptions (which is not documented in tabs nor worker, but in page-mod but should work for all, as a cursory test shows). Full example:
var tabs = require("sdk/tabs");
tabs.on('activate', function(tab) {
tab.attach({
contentScript: 'console.log(self.options);',
contentScriptOptions: {"abc": 123}
});
});
Or regular messaging.
You could use data.load from the self SDK module to load the content script in a string and append the values to the contentScript array:
worker = tabs.activeTab.attach({
contentScript: [
response.text,
data.load("js/do1.js"),
data.load("js/do2.js")
]
});
Related
i want to get the html page from link of my website and inject it like html again inside my popup.html page in google chrome extension
i need the code to be by using JavaScript and i don't want any jquery because
i did part of it before with jquery with this
$.get('some website ', function(data) {
$('.result').html(data);
alert('Load was performed.');
});
but i want JavaScript code to get the html from link which i want to define it inside the code
for example i have website like www.something.com/page.html
and i need to take the sourse code of page.html and inject it inside popup.html
that mean the extension will show me page.html
i hope that wanna be good explanation
This should do the trick, but be aware of the security implications of injecting a bunch of HTML into another document -- it's an easy way to cause XSS:
var element = ... // some element in your popup.html document
var request = new XMLHttpRequest();
request.onload = function() {
element.innerHTML = this.responseText;
};
request.open("get", "http://www.some.com/page.html", true);
request.send();
You'll also need to add a permission to your manifest to allow your extension to do cross-site XHRs to "http://www.some.com". Assuming no other permissions:
"permissions": [
"http://www.somecom/"
],
From a security POV, it makes more sense to just ask some.com for JSON data, parse that through JSON.parse() and then build whatever UI you need in the Chrome extension. Makes your extension also more stable/flexible because all UI is contained in the Chrome extension, not spread across extension and some.com.
Alternatively, if page.html is sufficiently static, bundle it into your extension and inject it with a code snippet similar to the one above, but use chrome.extension.getUrl('page.html') as the URL for request.open().
Regardless of whether your page.html comes from another site or from within the extension, you might need to fix relative URLs of images, scripts, style sheets (Chrome won't do this for you here), e.g. by prefixing their src/href attributes with http://www.some.com/ to point them to the intended resources again.
i am trying to write my first firefox add-on. the main problem seem s to be that i am also new to javascript. at the moment i have:
require('sdk/page-mod').PageMod({
include: ["*"],
contentScript: 'window.addEventListener("click", function(e) { alert("blub"); }, false);',
attachTo: ["existing", "top"]
});
(thx to the answer here.)
now i want to use a declared function instead of an anonymous one, but i cant get it to work:
require('sdk/page-mod').PageMod({
include: ["*"],
contentScript: 'window.addEventListener("click", function(e) { alert("blub"); }, false);',
attachTo: ["existing", "top"]
});
getImgData function (e) {
alert("blubber3");
}
the first problem is i get syntax error by just adding the function "missing ; before statement". But cfx doesn't tell me the wrong line. (Is there any useful tool for js editing with good syntax check/ content assist?)
So how to declare a function and use ist somewhere else in the script. At the end the function needs to get the target of click and parse it.
(i read the tutorials but thy all use anonymous functions :-P)
thx in advance
It's important to realize the separation between chrome scripts and content scripts. Chrome scripts are those that run with the same security privileges as Firefox - they have full access to Firefox and your computer. Content scripts are those that run with the same privileges as web pages. They can mess around with that web page, but are severely restricted otherwise. To maintain security, the way these two types of scripts can communicate is limited. You wouldn't want a web page to be able to call any function it wants in your extension's internal code!
Your main JS file (the one that includes require('sdk/page-mod')) is a chrome script. What you're injecting (contentScript) is (obviously) a content script. They can't communicate through a direct function call as you're doing.
If your getImgData function is something that can be done with normal web page privileges, you can move your definition of it to within the content script. If it requires additional privileges, you must have your content script communicate with your chrome script via the emit and on functions as described in the link above.
If you are going to make your content script any longer, I would recommend you separate it into its own file to make your life easier.
How can I write to a local storage of a different domain. The idea is that I need my chrome extension to write something in the local storage and when the user visits the associated website, site site can read the contents of the local storage. I am trying to do a sync between the user's personal data without having to store them in the server.
Content scripts have direct acccess to a page's localStorage.
If you want to store a value for a specific domain, just open a window or frame, then write to the window/page's local storage.
Pick your favorite option to activate the page:
chrome.tabs.create to create an inactive tab, perhaps in the non-active window found by using chrome.tabs.query.
The experimental offscreenTabs API (experimental, so not ready for use in production). See some of the examples I posted on SO.
Create an IFrame and insert it in the current page.
window.open (not recommended...)
When you decide to open a page, pick one which is light-weight. /robots.txt is usually a good choice: It exists on most sites, and it is a plain text file.
Activate the content script for the page. You can either use the manifest file and make use of the messaging APIs, or add a callback to the chrome.tabs.create method which programatically inserts a content script (chrome.tabs.executeScript).
Here's a simple example. It requires the tabs API because I'm using chrome.tabs.executeScript. Furthermore, the origin you want to access should also be added to the permissions list.
chrome.tabs.create({
active: false,
url: 'http://stackoveflow.com/robots.txt'
}, function(tab) {
chrome.tabs.executeScript(tab.id, {
code: 'localStorage.setItem("key", "value");'
}, function() {
chrome.tabs.remove(tab.id);
});
});
Update (2022)
Since Manifest version 3 the chrome.tabs.executeScript API was replaced with the chrome.scripting.executeScript API, hence the code above can be changed to be like this:
function saveToLocalStorage() {
localStorage.setItem("key", "value");
}
chrome.tabs.create({
active: false,
url: 'http://stackoveflow.com/robots.txt'
}, function(tab) {
chrome.scripting.executeScript({
target: {tabId: tab.id},
func: saveToLocalStorage,
}, function() {
chrome.tabs.remove(tab.id);
});
});
And please note, you need to add the "scripting" permission to your manifest.json file in order to use this API.
I think the only solution to do this is via script injection due to cross domain restrictions.
var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
Add a file script.js to your extension accessing the other sites localStorage, you have to add script.js to "web_accessible_resources" in your manifest file.
Note that the script is automatically removed after the script was completely loaded, so make sure that the code you want to execute is contained in a self executable function.
I work on a javascript library that customers include on their site to embed a UI widget. I want a way to test dev versions of the library live on the customer's site without requiring them to make any changes to their code. This would make it easy to debug issues and test new versions.
To do this I need to change the script include to point to my dev server, and then override the load() method that's called in the page to add an extra parameter to tell it what server to point to when making remote calls.
It looks like I can add JS to the page using a chrome extension, but I don't see any way to modify the page before it's loaded. Is there something I'm missing, or are chrome extensions not allowed to do this kind of thing?
I've done a fair amount of Chrome extension development, and I don't think there's any way to edit a page source before it's rendered by the browser. The two closest options are:
Content scripts allow you to toss in extra JavaScript and CSS files. You might be able to use these scripts to rewrite existing script tags in the page, but I'm not sure it would work out, since any script tags visible to your script through the DOM are already loaded or are being loaded.
WebRequest allows you to hijack HTTP requests, so you could have an extension reroute a request for library.js to library_dev.js.
Assuming your site is www.mysite.com and you keep your scripts in the /js directory:
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
if( details.url == "http://www.mysite.com/js/library.js" )
return {redirectUrl: "http://www.mysite.com/js/library_dev.js" };
},
{urls: ["*://www.mysite.com/*.js"]},
["blocking"]);
The HTML source will look the same, but the document pulled in by <script src="library.js"></script> will now be a different file. This should achieve what you want.
Here's a way to modify content before it is loaded on the page using the WebRequest API. This requires the content to be loaded into a string variable before the onBeforeRequest listener returns. This example is for javascript, but it should work equally well for other types of content.
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
var javascriptCode = loadSynchronously(details.url);
// modify javascriptCode here
return { redirectUrl: "data:text/javascript,"
+ encodeURIComponent(javascriptCode) };
},
{ urls: ["*://*.example.com/*.js"] },
["blocking"]);
loadSynchronously() can be implemented with a regular XMLHttpRequest. Synchronous loading will block the event loop and is deprecated in XMLHttpRequest, but it is unfortunately hard to avoid with this solution.
You might be interested in the hooks available in the Opera browser. Opera used to have* very powerful hooks, available both to User JavaScript files (single-file things, very easy to write and deploy) and Extensions. Some of these are:
BeforeExternalScript:
This event is fired when a script element with a src attribute is encountered. You may examine the element, including its src attribute, change it, add more specific event listeners to it, or cancel its loading altogether.
One nice trick is to cancel its loading, load the external script in an AJAX call, perform text replacement on it, and then re-inject it into the webpage as a script tag, or using eval.
window.opera.defineMagicVariable:
This method can be used by User JavaScripts to override global variables defined by regular scripts. Any reference to the global name being overridden will call the provided getter and setter functions.
window.opera.defineMagicFunction:
This method can be used by User JavaScripts to override global functions defined by regular scripts. Any invocation of the global name being overridden will call the provided implementation.
*: Opera recently switched over to the Webkit engine, and it seems they have removed some of these hooks. You can still find Opera 12 for download on their website, though.
I had an idea, but I didn't try it, but it worked in theory.
Run content_script that was executed before the document was loaded, and register a ServiceWorker to replace page's requested file content in real time. (ServiceWorker can intercept all requests in the page, including those initiated directly through the dom)
Chrome extension (manifest v3) allow us to add rules for declarativeNetRequest:
chrome.declarativeNetRequest.updateDynamicRules({
addRules: [
{
"id": 1002,
"priority": 1,
"action": {
"type": "redirect",
"redirect": {
"url": "https://example.com/script.js"
}
},
"condition": {
"urlFilter": 'https://www.replaceme.com/js/some_script_to_replace.js',
"resourceTypes": [
'csp_report',
'font',
'image',
'main_frame',
'media',
'object',
'other',
'ping',
'script',
'stylesheet',
'sub_frame',
'webbundle',
'websocket',
'webtransport',
'xmlhttprequest'
]
}
},
],
removeRuleIds: [1002]
});
and debug it by adding listener:
chrome.declarativeNetRequest.onRuleMatchedDebug.addListener(
c => console.log('onRuleMatchedDebug', c)
)
It's not a Chrome extension, but Fiddler can change the script to point to your development server (see this answer for setup instructions from the author of Fiddler). Also, with Fiddler you can setup a search and replace to add that extra parameter that you need.
I have created a Chrome extension that uses the hotkeys [Alt]+[0...9] only to discover facebook uses the same hotkeys. Is there any way possible my extension could disable facebook's hotkeys so that mine fire alone? I'm fairly certain I have identified the code facebook uses to implement their [Alt]+[0...9] hotkeys:
document.documentElement.onkeydown=function(a){a=a||window.event;var b=a.target||a.srcElement;var c=a.keyCode==13&&!a.altKey&&!a.ctrlKey&&!a.metaKey&&!a.shiftKey&&CSS.hasClass...
This is in a script called from the head of the root document. I have tried the following to disable them:
//contents script:
$().ready( function() {
document.documentElement.onkeydown = '';
});
and even
$().ready( function() {
document.documentElement.onkeydown = function(e){};
});
I am guessing further that the reason neither of these attempts work is because although Chrome extension content scripts share a DOM with any webpage on which they run, perhaps they do not share coding environments? Any insight would be appreciated!
Chrome's Content scripts are executed in a Sandboxed environment [source]. There is no direct way to communicate with the global (window) object.
Another common pitfall is that the developer forgets how/when the script is injected.
By default, the script is injected at a point called "document_idle". At this point, the document is not busy (DOMContentLoaded has fired, window.onload may or may not have fired).
As a result, the functions in the script may be overwritten immediately after declaration.
To inject a small script, I recommend to add the code directly to the Content Script:
var actualCode = '/* Code here (see below for inspiration) */';
var script = document.createElement('script');
script.appendChild(document.createTextNode(actualCode));
(document.head || document.documentElement).appendChild(script);
script.parentNode.removeChild(script);
If you want to make sure that the method is not going to be overwritten, you can use Object.defineProperty, to define an immutable property:
Object.defineProperty(document.documentElement, 'onkeydown', {
value: function() {},
writable: false, /* Cannot be overwritten, default false */
configurable: false, /* Cannot be deleted, or modified */
enumerable: true /* Does not really matter. If true, it's visible in
a for-loop. If false, it's not*/
});
The previously mentioned method is supported in Firefox 4+ and at least Chrome 5+. If you want to also support Firefox 2+ and Chrome 1+, you can play with the __defineSetter__, to prevent onkeydown from being defined:
document.documentElement.__defineSetter__('onkeydown', function(){});
Your intuition is correct, the JavaScript that runs from a content script as part of a Chrome Extension is run in a sandbox that does not have access to the JavaScript that is executed in the containing page.
Per the Chrome doc on Content Scripts:
However, content scripts have some limitations. They cannot:
* Use chrome.* APIs (except for parts of chrome.extension)
* Use variables or functions defined by their extension's pages
* Use variables or functions defined by web pages or by other content scripts
First off, I would recommend that you consider different shortcut keys. Overriding the functionality of existing shortcut keys for your own extension could provide a jarring user experience for someone that is expecting the Facebook shortcut key. Imagine if an extension overrode the ctrl-c and ctrl-p shortcuts that are a part of the desktop OS for copy and paste - I think you would have some upset users that would probably remove the thing that changed the behavior they learned prior.
However, if you are insistent, then here is a workaround to loading JavaScript that will execute in the context of the containing page:
Edit: Updated per comment to reference JS file in a plugin instead of one hosted on the web
First, you will need to create a JavaScript file in your chrome plugin: override-fb-hotkeys.js.
First, you will need to host a JavaScript file somewhere on the web that contains the script that you want to execute in the page, let us say you host it at: http://example.com/override-fb-hotkeys.js.
Then, from your content script, you can insert a script tag into the DOM that references your JavaScript file, something like this:
var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute("async", true);
script.setAttribute("src", chrome.extension.getURL("override-fb-hotkeys.js")); //Assuming your host supports both http and https
var head = document.head || document.getElementsByTagName( "head" )[0] || document.documentElement;
head.insertBefore(script, head.firstChild)
The JavaScript will then be fetched and executed in the context of the containing page, not the sandboxed code from the Chrome plugin.
This is how you can do it using jQuery
Remove all shortcuts for any webpage:
$('[accessKey]').attr('accessKey','')