Develop Reference

Chrome extension, best way to send messages from injected script to background

i'm trying to design a chrome extension, it has to inject a script into a web page, this script intercepts json responses, and send them to the background script.
Keep in mind i'm not used to js i might be doing this wrong, so, in my manifest i have :
"background": {
"scripts": ["background.js"],
"persistent": true
},
"content_scripts": [
{
"matches": ["*://url*"],
"run_at": "document_start",
"js": ["inject.js"]
}
],
"web_accessible_resources": ["injected.js"],
in my background script i handle the messages that way :
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.type) {
switch(request.type) {
case "THIS_REQUEST_TYPE":
do_stuff(request.foo, request.bar);
break;
...................
inject.js's purpose is to inject injected.js into a webpage, and now it's also doing relay for messages that goes from injected.js to background.js, i inject injected.js that way :
var s = document.createElement('script');
s.src = chrome.extension.getURL('injected.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
Now, to get messages from injected.js to my background script i basically use :
window.postMessage(msgdata, "*");
This send messages from injected.js to inject.js, then in inject.js i'm able to get those messages with :
window.addEventListener("message", function(event) {
Then i can finally send those messages to my background script, this time using :
chrome.runtime.sendMessage(
I found no possible way to directly send messages from injected.js to background.js, the informations available on chrome's documentation are perfectly fine to send messages from inject.js to background.js, but aren't working otherwise, i tried several online solutions and the one i use is the only one i was able to get working.
Anyway, this works, i'm able to send json responses from injected.js to inject.js to background.js and parse them in my background script.
The thing is, i hate having to do it that way, json responses can be really long, i'm already filtering responses in injected.js so that only those who are useful are getting sent, but still sometimes i have to send copy of responses that are 591109 characters long !
So, having to send twice responses that long is kinda ugly, i want this to be efficient and fast.
Anyone have an idea about this ?

Your injected.js is running in a script DOM element so it's just an unprivileged web page script. To use chrome.runtime.sendMessage directly from a web page script you would have to declare the allowed URL patterns in externally_connectable but you can't allow all URLs indiscriminately so I would use your approach, although with a CustomEvent (and a random event name most likely) instead of message which can be intercepted by the page scripts or other extensions - it's not security that I'm concerned with here, but rather a possibility of breaking some site that assumes the message data is in a certain format (e.g. string), not compatible with the one you use (e.g. object).
You can also use chrome.debugger API to attach to the tab and intercept the JSON response in your background script, but that will show a notification above the tab about it being debugged.
Anyway, unless you see your extension slowing down the page (in devtools profiler or by manually measuring the time spent in your code), there's no need to worry.
FWIW, in Firefox you can read the response directly via browser.webRequest.filterResponseData.

Chrome Extension - Alert on Tab Switch [duplicate]

chrome.tabs returns undefined despite the fact I set tabs in the permissions block.
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"js/myScript.js"
],
"all_frames": true
}
],
But in myScript.js the following returns undefined.
chrome.tabs

As content script has its own limitations,
chrome.tabs is only available in background scripts and popup scripts.
If you wanna to use chrome.tabs then pass message from content_script to background script and play with chrome.tabs.

Content scripts have only limited access to Chrome APIs. This access does not include the API you are trying to use (e.g. chrome.tabs). If you need to use that API, you will have to do so in a background script1.
As listed in Chrome's content scripts documentation, the APIs available to a content script are [I have placed deprecated methods in strikethrough format]:
extension ( getURL , inIncognitoContext , lastError , onRequest , sendRequest )
i18n
runtime ( connect , getManifest , getURL , id , onConnect , onMessage , sendMessage )
storage
A couple of the listed APIs are deprecated and have been for some time. Those that are deprecated have moved to different locations (also listed above):
extension.onRequest ➞ runtime.onMessage
extension.sendRequest ➞ runtime.sendMessage
While not officially deprecated, extension.lastError is also available as runtime.lastError. At this point, it is usually referred to at that location:
extension.lastError ➞ runtime.lastError
Partition your extension into background scripts and content scripts
You are going to need to separate your code into what needs to be in a background script and what needs to be in content scripts, based on the capabilities available to each type of script. Content scripts have access to the DOM of the web page into which they are injected, but limited access to extension APIs. Background scripts have full access to the extension APIs, but no access to web page content. You should read the Chrome extension overview, and the pages linked from there, to get a feel for what functionality should be located in which type of script.
It is common to need to communicate between your content scripts and background scripts. To do so you can use message passing. This allows you to communicate information between the two scripts to accomplish things which are not possible using only one type of script.
For instance, in your content script, you may need information which is only available from one of the other Chrome APIs, or you need something to happen which can most appropriately (or only) be done through one of the other Chrome extension APIs. In these cases, you will need to send a message to your background script, using chrome.runtime.sendMessage(), to tell it what needs to be done, while providing enough informaiton for it to be able to do so. Your background script can then return the desired information, if any, to your content script. Alternately, you will have times when the processing will primarily be done in the background script. The background script may inject a content script, or just message an already injected script, to obtain information from a page, or make changes to the web page.
Background script means any script that is in the background context. In addition to actual background scripts, this includes popups and options pages, etc. However, the only page that you can be sure to have consistently available to receive messages from a content script are your actual background scripts defined in manifest.json. Other pages may be available at some times as a result of the user's interaction with the browser, but they are not available consistently.
This answer was moved from a duplicate question, and then modified.

https://developer.chrome.com/extensions/tabs#method-getSelected shows
getSelected
chrome.tabs.getSelected(integer windowId, function
callback)
Deprecated since Chrome 33. Please use tabs.query {active: true}.
Gets the tab that is selected in the specified window.
Maybe, you should use chrome.tabs.query in popup.js like this
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
console.log(tabs[0].url);
});
, reload your extension and check the result in the inspect element of your extension.
result image
code image
https://developer.chrome.com/extensions/tabs#type-Tab shows that
The URL the tab is displaying. This property is only present if the extension's manifest includes the "tabs" permission.(Just for remind someone forgot. I was forgot it when I just test it.)

Check this answer also https://stackoverflow.com/a/6718277/449345
This one worked for me
chrome.tabs.getSelected(null, function(tab){
console.log(tab);
});

How do I access ALL window objects from a Chrome extension?

I am developing a Chrome extension for work, and one of the things it needs to do is to read (only read, not modify) an object that we send back to the website after it makes an asynchronous request to our servers. Basically I need to read the window.<our object name> object and get what's in there.
Now, I know this is possible, because I did this in a Tampermonkey script that I wrote. I was able to console.log(window.<our object name>) and it came in.
Tampermonkey is a Chrome extension, so there's no intrinsic reason why it can access something and another extension can't.
But when I try to access this object, both from content scripts and from injected code, I get nothing. When I get the window object only, it comes up only partially, as if the extension were blind to certain parts of it. But if I'm in the console on the page, and I call window, I get a full window object back. Infuriating.
So if content scripts don't work, and injected scripts don't work, and there's no reason why popup scripts would be any good here, how does one do this?
Many thanks!
UPDATE: As requested, here is the manifest.json (I took the page_redder example and worked off that to make sure I wasn't making any weird mistakes):
{
"name": "Page Redder",
"description": "Make the current page red",
"version": "2.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "get my object"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"manifest_version": 2
}
And here is content.js:
var getWindow = window.setTimeout(function() { console.log("From content script: " + window.<OBJECT NAME>); }, 5000);
And here is background.js:
// Copyright (c) 2011 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
chrome.tabs.executeScript({
code: 'console.log("From injected script:" + window.<OBJECT NAME>);'
});
});
When run, I get:
From content script: undefined
From injected script: undefined
But if I do window. from the console, I get it. I even added a timeout to make sure that the content script wasn't trying to get something that hadn't loaded in yet. But I can retrieve the object manually before the script runs, and it still gives me undefined.

Soo, this is kind of hacky, but I was able to do it and it worked.
To gain access to everything available to the host window, I had to create a script element, put all the code I wanted in there, and add document.body.appendChild(script) for it to work.
Not the sexiest way of doing things, but it will get the job done for small tasks.

Interesting question. Here is a quick and probably incomplete answer :
each tab has its own private separate window object
background.js also has its own
content scripts are a bit tricky in that while they nominally live inside the page, they actually keep a respectful distance : see isolated worlds
I am not familiar with chrome.tabs.executeScript but somehow I would'nt trust it with anything beyond basics
One approach could be as follow :
Open the relevant page from the background script with chrome.tabs.create : hence the backgound will have complete control and dominance over said tab and the window, document and your_object therein. It will also be easier to handle the asynchronous side of thing : you'll learn to love callbacks.
Depending on what is required regarding the UX, another option would be to handle the async request, and fetch your_object, entirely in background.js
One last hint : extensions you download from the store are just zipped files in your Chrome profile. Find tapermonkey.crx or whatever, unzip it and read the sources to figure out what it does.
And oh, relying on timeout to handle asynchronicity is bound to random results.

According to documentation in https://developer.chrome.com/extensions/content_scripts
However, content scripts have some limitations. They cannot:
Use variables or functions defined by web pages or by other content scripts.
So you can access the common window variables from the content script, but not the variables created from the webpage's javascript, another content script or, as in your case, an object you have sent to the website.

Why are the document getter functions being reset?

I am trying to create a small chrome extension to help find where cookies are using in websites. The extension is SUPPOSE to work by setting the getter method for the cookie on the document.
Like so:
document.__defineGetter__('cookie',function(){
alert("test");
});
When manually put into chrome's javascript console on a website and then trying to access a cookie (simply typing "document.cookie") it results in the expected behavior where it will pop up the test prompt.
However when I put this into a chrome extension and have it load before the rest of the page it will fail to work.
Here is the manifest.json (I was just using soundcloud as a test website):
{
"name": "Cookie Auditor",
"version": "0.1",
"manifest_version": 2,
"description": "An extension to help examine where cookies are being used in websites.",
"content_scripts": [
{
"matches": ["*://*.soundcloud.com/*"],
"js": ["content.js"],
"run_at": "document_start"
}
]
}
and here is the content.js:
console.log(document.location);
document.__defineGetter__('cookie',function(){
alert("test");
});
console.log(document.__lookupGetter__('cookie'));
When attempting to manually trigger it (document.cookie) it simply returns the normal value and fails to execute the javascript. When it failed to work here I put in the checks for the document location to make sure it was executing on the right domain and was even loading at all.
The weird part is when you load the page with this extension it will print out that it is on the right domain and it even shows that the cookie getter method was overwritten correctly (it print the function in the console).
However when you lookup the getter method it has been reset (document.__lookupGetter__('cookie')).
My last thought was that it was being reset sometime between my content.js script running and the rest of the page initializing. However when I change the "run_at" field in the manifest.json file to "document_end" in an attempt to make it run later and potentually after any sort of re initialization of the document then soundcloud's stuff will start printing on the console showing that it has properly loaded the page however my script still fails to have made an effect.
EDIT: Before it is suggested. I can't use chrome's cookie API because it doesn't provide a way of actually listening to when a cookie is retrieved which is the main thing I care about.

After some digging around I found out why it was failing. Chrome extensions are executed in their own javascript space but with the same DOM as the site they run on. See https://developer.chrome.com/extensions/content_scripts#execution-environment. This causes them to have seperate global variables and thus my script's attempts to change them would only affect itself. For anyone looking at how to get around this limitation all you have to do is add a script tag with your code onto the document from your extension.

Execute chrome extension function before opening a connection to the site?

This is my first time ever touching any sort of client sided web programming language, and, I'm attempting to make my first chrome addon. Basically what I want to do is code something which redirects from:-
ABC.com/ID
to
A.ABC.com/ID
So far I have it all coded, however, what it does is it loads ABC.com/ID, waits for it to complete, then injects my content script and re-loads A.ABC.com/ID. This is obviously a huge waste of time. Is there any way I can tell chrome to load this script either before the DNS lookup (Because that's useless, because it's on a new subdomain), or, before opening a connection to the site (Because this isn't the page we're looking for)? I understand a content script may not be the best idea, if it's not, then what would be?

Yes, you can achieve with web request API without any content scripts. The following demonstration blocks all Facebook URL's and redirects them to Google, similarly use ABC.com/ID instead of Facebook and use A.ABC.com/ID instead of Google for this use case.
References
Web request
Background Page
Manifest File
manifest.json
Ensure all permissions are available and register background page with extension.
{
"name": "Hanlder for Navigation",
"description": "http://stackoverflow.com/questions/14050467",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"permissions":["https://www.facebook.com/*","webRequest","webRequestBlocking"]
}
background.js
This code blocks all URL request to Facebook and redirects them to Google.
// Register an event listener which
//traces all requests before being fired
chrome.webRequest.onBeforeRequest.addListener(function (details) {
return {
redirectUrl: "http://www.google.co.in/" /*Redirection URL*/
};
}, {
urls: ["*://www.facebook.com/*"] /* List of URL's */
}, ["blocking"]); // Block intercepted requests until this handler has finished
Output
All request(s) to Facebook are redirected to Google.