Communication between background.js and popup.js - javascript

I'm trying to build a chrome extension which stores links that I press while holding down shift and alt. This is my first chrome extension, and if I'm not mistaken, the way I'm supposed to do this is have a background.js which does the event handling for when I click on a link. Then, when I click on the link, I want popup.js to access that link somehow and display it on the page for later use. What would be the best avenue for this? Should I use localstorage, store the link in there, then when I open up popup.html have popup.js access it through localstorage and grab it to display it? Is there any way to have them directly communicate with each other?

You can directly access any methods/objects declared at background.js using chrome.runtime.getBackgroundPage.
Check http://developer.chrome.com/extensions/runtime#method-getBackgroundPage for additional information.

Related

Chrome Extension: Is there a way to execute popup.js before clicking on the extension icon?

What I'm trying to do:
I'm building a chrome extension that has a popup, an options page, and content scripts. So far, I'm able to store preferences set on the options page and get them using popup.js. The popup.js makes a couple of public API calls to get some information X.
What I'm stuck on:
I need to be able to run/execute popup.js when the DOM loads, before the extension icon is clicked, so that information X can be injected into the DOM via the content scripts.
My question:
Is there a way to execute popup.js before clicking on the extension icon? (Right now, the content scripts loads fine displaying information X, after the the extension icon is clicked)
chrome.storage is fully supported for content scripts, so there is no need to communicate the user preferences from the options page to the content scripts via popup.js or background.js.
With this in mind, I'm able to access user preferences directly to make the API calls in the content scripts, using storage.sync

How does google reflect changes(like file rename) in one tab to other tab in drive?

For example, I opened a document named "Doc1" from my drive. If I rename it to "Doc2" from the drive explorer, the opened document in the other tab gets reloaded and changes it's name. I want to know exactly how google does this? I learnt somewhere that it uses Html5 storage for this.
You can definitely implement this using HTML5 localStorage. Whenever the script in any of the open tabs adds or changes an item stored there, the other tabs receive a "storage" (or "onstorage" for IE) event.
If you give each document a unique identifier, and store a dictionary mapping identifier->filename for all open files, you can change those names from any tab. Or you can simply store an array of files that need updating, and have the tabs reload themselves (including their updated "filename") from the server.

Chrome Extension: How to send data from Panel Window to Popup?

I am working on Chrome extension which on clicking extension Icon popsup a window(popup.html) which contain button for Video Play. Upon clicking of the button opens another button which is created by using window.create of type panel. Upon clicking of PLAY button on popup.html does following:
Make a DIV enabled
Create new window by calling window.create with name mypanel.html. It uses panel.js to make ajax call and DOM changes functions.
Make an Ajax call, get data and play Video
Now thing is, the data I am getting via AJAX call in panel.js. I want to send that data back to pop.html which itself is using file popup.js. How can I send data from panel window to back to Popup Window?
The standard method of communicating between parts of the extension is described in Messaging documentation.
However, you need to keep in mind that as soon as a popup is closed, it is unloaded and the JavaScript context is destroyed along with it. So it cannot receive messages when closed and will lose all state when reopened.
There are two solutions to this:
You could employ a background page to hold state (if set to be persistent) and route messages between parts of the extension, e.g. a popup can request the current state when opening. This is an old-school solution.
If all you need is to pass/persist some data, you can easily employ chrome.storage.local to do it. You can save data with panel.js and react to changes with chrome.storage.onChanged event. The extra bonus is that when a popup reopens, it can simply read the storage to build its initial state.

How to access bookmarks page and other chrome urls in an extension?

I'm developing an extension which replaces the new tab page with a set of other features.
I have a link on the new "new tab" page. And I've set the value of its href attribute to chrome://bookmarks
But whenever I click on it, I get an error message in the console saying "Not allowed to load local resource."
I also tried loading the unpacked extension files and tried it out. But still wasn't able to access the bookmarks page. I've seen many extensions which have links that can access the bookmarks page. For example, Dayboard.
How do I go about this problem?
You should be able to open chrome://bookmarks/ programmatically.
Make an click handler that triggers chrome.tabs.create({url: "chrome://bookmarks/"}) - I just checked and it works from a background page.
If you need to replace your current tab, use chrome.tabs.update.

Calling a variable from a function in a different JS file

I am working on a chrome extension and I am stuck. I am not sure if this is even possible but this is what I need to have done. Basically the user click on the chrome extension and panel opens up (popup.html). The user is shown a list of images from the web and the user can select the ones they want to edit. popup.html loads popup.js. popup.js contains functions and inside those functions are some variable. Now there is a button in popup.html that takes you to another panel called filters.html. This is where editing goes. I am trying to pass the selected images from popup.html to filters.html and I am trying to call that array of images that was gathered in popup.js when popup.html loaded but its null. What is wrong is this even possible? When a new html page opens up does that mean it loses track of what happened in the last html page and therefore it loses also track of whatever .js files ran in that same page?
A new and better way is to use chrome extension storage. You can store the data from one page and u can read it in other page as data will be stored in chrome itself. Hope it helps

Categories

Resources