How to save the state of popup.html in the current tab? - google-chrome-extension

I have a checkbox on the popup of the extension and I want to save the status of the checkbox for every page.
I've tried using browser.storage.local but it will be shared within different tabs that have the extension running.
How do you save the sate of a checkbox in popup.html that is unique for every opened tabs?

Every open tab, will be opened to a different page, so you can use window.location of each open tab, and then you can use Chrome.Storage to save a key pair Object, of the Checkbox State, and window.location.
Have your popup.js include the chrome.storage.get to retrieve the variable from local storage at the top of the script. Include popup.js in your popup.html.
You would need to have some type of IF/ELSE statement to say, if window.location is equal to what's in the Chrome.storage.get, then checkbox state is...

Related

event listener when tab is changed

I need to store some data every time I move to some other tab in the same window or some other window using chrome storage API or even when a new tab is created. So, basically when my active tab is no longer active anymore.
So, for example, If I am on tab A and then I move to tab B(or create a new tab). When this switching happens from A to B, I need to save data from the website running in tab A. (I am getting the data from the site in tab A using content script.)
A more concrete example would be, suppose I am on YOutube site and I have a timeout timer running(using a content script). So when I move to some other site I want to stop the time get the current remaining time and save that. and if the other site is youtube too(in tab B) I would start the time from the previously saved value.
Is there any event listener for this? I looked at the documentation for chrome.tabs but could not figure it out.
I saw onActivated event listener but I am not sure if that would be useful.
Or is there some other way to achieve this?
Yes, according to the documentation onActivated:
Fires when the active tab in a window changes.
As an alternative, also can use content scripts that notify your extension when a page gain or loses focus with window.onfocus and window.onblur.
This way you'll be able to track the visibility of the tabs, though you should carefully select the required permission.

Selecting Browser Action for Current Tab in Chrome Extension

I'm working on a chrome extension that manipulates certain cookies. Most of the manipulation takes place in the background service, but I need to update the icon and pass data to the browser action for the current tab.
I'm looking for an action similar to the AdBlock extension. AdBlock loads a small number in the bottom right of the icon for the number of ads blocked, so it varies from tab to tab.
When I perform this action from the background service, it seems to change across all browsing tabs. Can someone with experience in extensions point me in the right direction for this one?
This should get you started.
setInterval(function(){//every second
chrome.tabs.getSelected(null,function(tab) {//on the current tab,
chrome.browserAction.getBadgeText({tabId:tab.id}, function(badgeText){//get the tab's badge text
if(badgeText.length<1){
badgeText="0";//set the text if its empty
}
chrome.browserAction.setBadgeText({tabId:tab.id,text:badgeText/1+1+""});//and add one.
});
});
},1000);
make sure you don't run this in the console, because chrome will get the developer tool window id, and since no valid tab has that id, it will change every single tab's badgeText.
You just need to include the tab id when you set it, such as:
chrome.browserAction.setBadgeText({ text: "5", tabId: tab.id })

Safari Extension: Display a local HTML, instead of the default or blank page, when the user opens a new tab

I'm trying to port a simple Chrome extension to Safari extension. It should display a local HTML when the user opens a new tab, but the path to the file should not appear in the URL-bar.
The code for the Chrome Extension is:
manifest.json
{
...
"chrome_url_overrides": {
"newtab": "main.html"
},
"permissions": [
"tabs"
]
}
main.html
<html>
<head></head>
<body>
Hello World!
</body>
</html>
In Safari, the close I get is to create a button on the toolbar an redirect to an URL.
How can I achieve the same functionality? I've tried to find examples, with no luck.
This may not be possible to do reliably. You can detect when a new tab is opened using the open event that is fired on safari.application or on a SafariBrowserWindow object, but then you have to make sure the new tab is not going to have a page loaded into it right away. That you can do by listening for a beforeNavigate event on the new tab...but then there are complications.
If the tab remains truly blank, no beforeNavigate event will be fired right away, so you can use a timeout to stop listening for the event and then proceed with loading the page of your choice. But new tabs may not remain blank. They can show the Top Sites page (the default behavior), they can show the user-specified home page, or they can show the page that is loaded in the previous tab.
In the home-page and same-page cases, a beforeNavigate event will be fired on the new tab, and its url property's value will be the URL to be loaded. Whether or not to hijack these types of new tab and load your own page into them is up to you.
In the Top Sites case, a beforeNavigate event will be fired on the new tab, but its url property will be null. So you might think you can detect that and then load the page of your choice in the new tab. However, there is a problem, because this same behavior (a beforeNavigate event with a null url) happens when any extension opens one of its own pages in a new tab. Therefore, if you were to hijack all tabs with a null beforeNavigate URL, you would make it impossible for other extensions to open their own pages.

How do a Chrome Extension background.html access the current window (user's content window)

chrome.windows.getCurrent only gets me the background.html itself. What I really want is the content window that the user is browsing.
Any tips for this, thanks!
The current window is the window that contains the code that is currently executing. It's important to realize that this can be different from the topmost or focused window.
For example, say an extension creates a few tabs or windows from a single HTML file, and that the HTML file contains a call to chrome.tabs.getSelected. The current window is the window that contains the page that made the call, no matter what the topmost window is.
If you want to get content window what user is browsing you can use following code:
popup.js
chrome.windows.getAll({"populate":true},function (windows){
for(i=0;i<windows.length ;i++){
if(windows[i].focused){
for(j=0;j<windows[i].tabs.length;j++){
if(windows[i].tabs[j].selected && windows[i].tabs[j].active && windows[i].tabs[j].highlighted ){
console.log(JSON.stringify(windows[i].tabs[j]));
}
}
}
}
});
Why not use chrome.windows.getLastFocused()?

switch to chrome extension page without the tabs permission

I'm writing an extension for chrome that shows a results page when a user enters a query from the popup.
I would like subsequent queries to use the existing results page rather than opening new ones.
I used chrome.extension.getViews({'type':'tab'}) to get the currently opened extension pages and to pass the query to a javascript function in the open page.
The issue I'm having is switching to that page without requiring the 'tabs' permission.
This snippet of code works well from the background page.
chrome.tabs.getCurrent(function(tab){
chrome.tabs.update(tab.id, {selected: true});
});
However, tabs.getCurrent requires the 'tabs' permission. Is there a way to do this without the tabs permission?
I could use chrome.tabs.update but I don't know how to get the tab id from the view object returned from chrome.extension.getViews.
I'm fairly certain this can't be done without the tabs permission. You have correctly identified that chrome.tabs.update is the function you need, but without the tabs permission, it can only operate on the currently selected tab by provifing a null tab ID argument. Since you can't supply tab IDs in chrome.tabs.update without permission, switching between tabs is not possible.
/edit: As appsilers mentioned, not really doable.
If you can instead use chrome.tabs.create() to open the required tab, it will also return its tab id upon creation.
Otherwise the only way is to plast a global inside the target context and use chrome.extension.getViews() to identify the target and call a focus-stealing function, like alert(). But I'd advise against, since it's more like a hack and there isn't really a guarantee this functionality will keep stable between builds.

Resources