My extension runs on an existing web page I do not control. I want to have an options page for it. What I haven’t figured out is how to get the option values from the injected code. localStorage isn’t shared, of course. I’ve tried using sendRequest / addListener in both directions, although it would be much preferable to push values from the options page to the injected code than they other way ‘round.
At the beginning, I simply put the option checkboxes on the manipulated page (the one the code is injected into), and those checkboxes set values in localStorage:
localStorage.showStuff = !!$(evt.target).attr(‘checked’);
Then I check those values in the code:
if (localStorage.showStuff == ‘true’) { … }
I moved the checkbox code to the options page and had it do a sendRequest when the options changed, and had my injected code have a listener for the message, but it doesn’t get the messages (my background page does, but that doesn’t help me). I also tried having the injected code hand a callback to the options page, but the sendResponse object only seems to work for the duration of the notify handler (not surprising, but I had to give it a try).
Right now my manifest’s permissions lists the foreign page ("http://example.com/*") and “tab”.
The one thing I know I can do is asynchronously query the options page via a callback, but the code doesn’t (and really can’t) work asynchronously without serious rewriting.
Any and all ideas welcome, thanks in advance.
i'm new to chrome extensions but when i tried to write/read localstorage from both, background script and option page it worked perfectly.
i haven't tried native localstorage but chrome's storage api.
take a look at this
code A: (set)
chrome.storage.sync.set({'key':'qwe'});
code B: (get)
chrome.storage.sync.get('key', function(response) {
console.log(response); // 'qwe'
});
u could put either code A in the background and code B in the option page or the other way around.
they are using the same storage.
this works for me. i hope u'll get there too.
The thing to remember is that only the background page is long-lived. The rest of the pieces of your chrome extension are transient (content scripts for the duration of the site navigation, options pages only while open, etc).
So you have to use messaging and save things using the background page. However, get ready for the storage API which should be landing soon. This will make things a lot easier for you!
Check it out here.
Related
First of all sorry if this question has been already asked somewhere, but after a few hours on google I still can't find an answer.
I am pretty new in portlet development, (but we have a shortage of developers and I have to work with it time to time), so the solution might be something trivial, but I really don't have enough experience with it.
The problem is I have two portlets on a page and I try to let one of them know about changes in the other. For this I use IPC. In the first one I have a Liferay.fire function:
function fire(key,value){
Liferay.fire(
'category',{
id: key,
name: value
}
);
}
In the other I have a Liferay.on('category',function(category){...}) function with an ajax call inside and some rendering methods.
Now if I visit the mentioned page and click on the corresponding buttons, at first everything works just fine. However, if I navigate from this page and come back, the listener will run two times. Navigating again -> three times. And so on... But if I reload the page (with F5 or CTRL+F5), it starts over, so until further navigation the listener runs only once.
The other strange thing is no matter how many times the function runs, the input parameters are all the same for each.
For example, if I have left the page and went back to it 3 times and last time I chose the category with 'id=1', then the function will run 3 times with 'id=1'. Now if I choose 'id=2' it will run 3 times with 'id=2'.
If anyone has any idea I would be really grateful as I am stuck for almost a day now.
Thank you very much in advance and please let me know if you need any further info.
the problem you're having is caused by the global Liferay.on listeners that are being created but never removed.
In Liferay Portal 7.x, SPA navigation is enabled by default. This means that when you are navigating, the page isn't being completely refreshed, but simply updated with new data coming from the server.
In a traditional navigation scenario, every page refresh resets everything, so you don't have to be so careful about everything that's left behind. In an SPA scenario, however, global listeners such as Liferay.on or Liferay.after or body delegates can become problematic. Every time you're executing that code, you're adding yet another listener to the globally persisted Liferay object. The result is the observed multiple invocations of those listeners.
To fix it, you simply need to listen to the navigation event in order to detach your listeners like this:
var onCategory = function(event) {...};
var clearPortletHandlers = function(event) {
if (event.portletId === '<%= portletDisplay.getRootPortletId() %>') {
Liferay.detach('onCategoryHandler', onCategory);
Liferay.detach('destroyPortlet', clearPortletHandlers);
}
};
Liferay.on('category', onCategory);
Liferay.on('destroyPortlet', clearPortletHandlers);
When I started create extension, I didn't know that "popup" always reinit after open.
Is it have some options for off this behavior?
"background" page is not good for me.
That is the default behavior, just like closing-opening a tab/window.
Using background page (persistent: true) is a good way, it lives through the entire browser lifetime.
However, if for some reason you are not planning to use background page, I guess chrome.storage or Window.localStorage is also a good way, taking the former for example, you can store data through chrome.storage.local.set while retrieving the data via chrome.storage.local.get every time the popup page opens.
I created a Chrome extension that adds links to items (things your friends share with you) on your facebook feed. Facebook loads about 10 or 20 items on the feed on page load, and then the rest are loaded via ajax when you scroll down.
I managed to get my content script to work for the first items, but not for the rest. I've read everything i could find, and it seems that I have to reload my content script.
How can i do that considering that the URL does not change?
You can use document.addEventListener with the DOMNodeInserted event to listen for new items getting rendered in the feed. The callback will have to check each node insertion to see if it is a feed item or not. Something like the following should work.
function nodeInsertedCallback(event) { console.log(event); });
document.addEventListener('DOMNodeInserted', nodeInsertedCallback);
Well, you can hang some time driven listener that runs every XX seconds, to verify if there's new items to work with.
Unfortunately there's no event you can hang from, fired when the page's code do some Ajax.
May be you can figure out what evet you can han from to detect the user has reached the end of the loaded item's list, knowing that de page's code will do some Ajax to retrieve more items. Then you start you time driven listenter.
How do I call a function in the options page from the background page?
For example, in the options page, you can call:
chrome.extension.getBackgroundPage().updateIcon("someDifferentIcon.png");
thereby communicating with the background page from the options page. How do you communicate with the options page from the background page?
One possible difficulty is that the options page is not always open (unlike the background), so that may explain why its not built-in (like above). My question is, is it possible to do?
A simple approach to implement your idea is using "chrome.extension.sendRequest" API. For example:
options.js:
chrome.extension.sendRequest({id:"updateIcon", filename:"foo.png"});
background.js:
chrome.extension.onRequest.addListener(funciton(request) {
if (request && (request.id == "updateIcon"))
updateIcon(chrome.extension.geURL(request.filename));
});
If the options page is already open, you can use chrome.extension.getViews({type:"tab"}) to get a hold of its window object and then call functions on it (you'll need to iterate over the returned views and pick the one with the URL that is the URL of your options page). If it's not open yet, you can use the tabs API to open a tab that points to it first, and then use chrome.extension.getViews.
I want a confirmation window on click of a browser back button. If I press yes then the previous page will get load ortherwise I will remain in the same page?
Any suggestion is highly appreciated.. But please be on track.. my question is straight forward
thx in advance..
Why do you want to do that?
You can prevent them from leaving the page by using Javascript, but if you can't use that, it's not possible to do anything about it.
Generally you should use the unload event in the body (in jQuery for instance, just add
jQuery(window).unload(function(evt){
if(!confirm('Do you really want to leave')){
evt.preventDefault();
}});
Prototype have something similar, and for pure Javascript, I guess that it still depends on the browser you're using, but window.unload = function(evt){return false;} might work.
Don't remember the correct syntax for it though.
but I do not know if you can limit that for only the back or if it will trigger for all the unloads (like clicking on a link, closing the browser etc.)
If you want to stop them because they might have unsaved data in a form, then that is ok. If you want to stop them from going back for another reason than that, I think you should rethink why.
Generally if using the back button can cause issues you already have bigger problems.
What you probably want to do is check that you do things like this:
Use POST for all requests that alter data
Use nonce's (unique ID's) to enure forms don't get submitted twice
I use noscript for this very reason. I insist on having control of my browser not the site that I am visiting. I only allow scripts for certain sites. For any site that disables my back button,I don't allow it to run scripts.