Ok, here is my problem. I am writing a Chrome extension, it's almost done, but the problem is, for example:
[Page popup.html]
localStorage["code"] = "alert('Hello!');";
[File injection.js; which will be called everytime a page is loaded, content script I think]
localStorage["code"] = (localStorage["code"] != undefined) ? localStorage["code"] : "alert('Default!');";
eval(localStorage["code"]);
I have tried 2 methods, the first thing is to NOT OPEN THE POP UP, so that every page I load would run command alert("Default!"); and it works. Then I tried to load the popup first, and I realize that the variable localStorage["code"] is now up to the page I load, not to my extenstion anymore. In a quick explanation, in my extension, localStorage["code"] == "alert('Hello');"; but in http://google.com localStorage["code"] == ""; or in http://facebook.com localStorage["code"] == "";.
My question is, is there anyway to store localStorage["code"] from popup.html that injection.js can access?
Three are 2 kinds of local storages - one belongs to extension itself (can be accessed only from a background page, popup page or any page bundled into extension package), another one belongs to the site (can be accessed only from a content script).
So if you need to access local storage value that was set in a popup from a content script, you need to send a request to a background page, read the value there, and send it back to a content script. How to do that is explained in Message Passing doc.
Check this out :
Content-Script :
chrome.extension.sendRequest({ action : "getCode" }, function(response) {
alert(response.getCode);
});
Background Page :
chrome.extension.onRequest.addListener(function(request, sender, sendResponse)
{
case "getCode":
sendResponse({ getCode: localStorage['code'] });
break;
}
Related
I am using nginx as a Reverse Proxy in front of a website and intercept download/preview requests for the files stored on the site. The download requests come from within an iframe and if the user is not authorised, I redirect them to the logout page. But this does not take the main page (outside of the iframe) to the logout page. Any idea how to go about this?
If the user is not authorised you may want to send a message from the iframe to its parent. On receiving the message you would then redirect the parent window to the logout page. An example implementation is found here.
However this becomes much harder if you are not able to modify the iframe page's source. Since you are using nginx, one solution would be script injection using the ngx_http_sub_module module. This module replaces one string in the response with another. Note that this module is not included by default, you may need to build nginx with the --with-http_sub_module parameter. See the module page for more information, including an example.
The iframe needs the line:
parent.postMessage( "redirect", "http://www.your-domain.com" );
To inject this with nginx you might try:
location / {
sub_filter '</head>' '<script language="javascript">parent.postMessage( "redirect", "http://www.your-domain.com" );</script></head>';
sub_filter_once on;
}
The parent window would need the corresponding code:
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[ eventMethod ];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer( messageEvent, function( e ) {
// normally if the message was meant to come from your domain
// you would check e.origin to verify that it's not someone
// sending messages you don't want
if ( e.data = "redirect" ) {
window.location.replace( "your-logout-url" );
}
}, false );
A more advanced solution might include the redirect url in the message; you could then handle the iframe redirecting to different locations.
I'm currently trying to build my first chrome extension and I only need it to interact with pages of a few domains, so I want to avoid using the "tabs" permission since I understand it would have me request access to all information and all domains.
Instead I want to restrict myself to using the aciveTab permission and, if need be, a content script.
In short, what I want to do is display a "Subscribe button" in my extension's popup if the currently selected tab's url is of the domain(s) I'm interested in.
I can get the url of the page when it's created using a content script but I don't know how to make sure the user is still on that page when my extension is clicked.
I haven't managed to get anything done with activeTab.
Thanks in advance for any piece of advice you can give, I'll check on the answers (if any) after work.
A working example with the activeTab permisison:
In your popup.js
chrome.tabs.query({lastFocusedWindow: true, active: true}, function(tabs) {
if (tabs && tabs[0] && tabs[0].url) {
var match = tabs[0].url.match(/^[^:]+:\/\/([^\/]+)/);
if (match) {
var domain = match[1];
if (domain == 'stackoverflow.com')
alert('test');
}
}
});
Note:
You have to declare the "activeTab" permission in your manifest (of course).
JavaScript code must be in a standalone file and included in popup.html with <script src="..."></script>. Inline JavaScript is not allowed due to CSP.
I built a chrome extension that saves data to localStorage from the background page (using the chrome.storage.sync.set).
Now, say that I want to build a website and access to the extension's data on the localStorage from the website, is it possible to access this data from the website domain? maybe I can add something to the manifest file to allow that?
You would have to inject a content script into your web site and then have your background script pass the localStorage to your content script. As for communication between your content script and the script on your web site, you'll have to get creative.
I am assuming here that you are aware of the message passing procedures between the content script and background script.
Now, I don't think your website can make a request to the extension and "pull" data from it, but you can certainly have your extension "push" data to your website.
This is how you can do it:
Content Script
The content script should check if the site open in the website is your website, say www.yourwebsite.com
if (currentUrl == "www.yourwebsite.com")
{
....
}
If it is indeed your website, pull the required data from the background script
if (currentUrl == "www.yourwebsite.com")
{
chrome.extension.sendRequest({ "getLocalStorageData": true, "dataFieldName": "favouriteColor" }, handleLocalStorageResult);
}
function handleLocalStorageResult(dataValue)
{
.....
}
On receiving the data in method handleLocalStorageResult, inject the data into the page's html so that your website's javascript can read it
if (currentUrl == "www.yourwebsite.com")
{
chrome.extension.sendRequest({ "getLocalStorageData": true, "dataFieldName": "favouriteColor" }, handleLocalStorageResult);
}
function handleLocalStorageResult(dataValue)
{
var localStorageDataDiv = $('<div>').appendTo('body');
localStorageDataDiv.attr('id', 'extensionData');
localStorageDataDiv.html(dataValue);
}
Your WebSite's Javascript
Now your website's javascript can read the data
var data = $('#extensionData').html();
alert('My Extension's LocalStorage Data is ' + data);
Answers to date do not mention that content scripts and the webpage share their localStorage object. If your content script writes to localStorage, the webpage will be later able to read it, and vice versa.
I am trying to use HTML5 Appcache to speed up my web-mobile app by caching images and css/JS files. The app is based on dynamic web pages.
As already known – when using Appcache the calling html page is always cached -> bad for dynamic websites.
My solution - Create a first static page and in this page call the manifest file (manifest="cache.appcache") and load all my cached content. Then when the user is redirected to another dynamic page the resources will already be available. (Of course this second dynamic page will not have the manifest tag).
The problem is that if the second page is refreshed by the user, the resources are not loaded from the cache; they are loaded directly from the server!
This solution is very similar to using an Iframe on the first dynamic file. I found that the Iframe solution have the exact same problem.
Is there any solution for that? Can Appcache really be used with dynamic content?
Thanks
Yes appcache can be used for dynamic content if you handle you url parameters differently.
I solved this by using local storage (I used the jquery localstorage plugin to help with this).
The process is
Internally from the page when you would normally href from an anchor or redirect, instead call a function to redirects for you. This function stores the parameters from the url to localstorage, and then only redirects to the url without the parameters.
On the receiving target page. Get the parameters from localstorage.
Redirect code
function redirectTo(url) {
if (url.indexOf('?') === -1) {
document.location = url;
} else {
var params = url.split('?')[1];
$.localStorage.set("pageparams", params);
document.location = url.split('?')[0];
};
}
Target page code
var myParams = GetPageParamsAsJson();
var page = myParams.page;
function GetPageParamsAsJson() {
return convertUrlParamsToJson($.localStorage.get('pageparams'));
}
function convertUrlParamsToJson(params) {
if (params) {
var json = '{"' + decodeURI(params).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}';
return JSON.parse(json);
}
return [];
}
I had a hell of a time figuring out how to cache dynamic pages accessed by a URI scheme like this:
domain.com/admin/page/1
domain.com/admin/page/2
domain.com/admin/page/3
Now the problem is that the appcache won't cache each individual admin/page/... unless you visit it.
What I did was use the offline page to represent these pages that you may want to allow a user to access offline.
The JS in the offline page looks up the URI and scrapes it to find out which page it should show and fetches the data from localStorage which was populated with all the page data when the user visited the admin dashboard before being presented with the links to each individual page.
I'm open to other solutions but this is all I could figure out to bring a bunch of separate pages offline with only visiting the single admin page.
When developing a Chrome extension, my background script needs to communicate with the content scripts in the tabs loaded with a particular site.
Is there a way to communicate without using chrome.tabs.sendRequest?
This function requires the "tabs" permission which shows up as "this extension has access to your browsing history," which scares off users.
Sorry, there is no other way around.
UPDATE
Actually there is a way. Instead of pushing data from a background page to a content script you can pull data from a content script, and this doesn't require any permissions:
content script:
chrome.extension.sendRequest({cmd: "getData"}, function(response) {
console.log("data:", response);
});
background page:
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if(request.cmd == "getData") {
sendResponse({param1: "value1", param2: "value2"});
}
});
Remember even if you could communicate with background page without using chrome.tabs.sendRequest (actually it is almost impossible), you still need the tabs permission in order to inject a content script.
Read more: http://code.google.com/chrome/extensions/content_scripts.html