I have a chrome extension with options set through the options_ui tag in manifest.json. I can save options however I noticed the options modal has to be closed for the chrome.storage.sync.set function to complete saving the options. How do I force saving of the options upon clicking "save" even if the options modal is not closed?
options.js:
function save_options() {
var hideAds = document.getElementById('hideAds').checked;
chrome.storage.sync.set({
hideAds: hideAds
}, function() {
// Update status to let user know options were saved
var status = document.getElementById('status');
status.textContent = 'Options successfully saved...';
setTimeout(function() {
status.textContent = '';
}, 1000);
});
}
// Restores checkbox state using the preferences stored in chrome.storage.
function restore_options() {
// Use default values
chrome.storage.sync.get({
hideAds: false
}, function(items) {
document.getElementById('hideAds').checked = items.hideAds;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);
manifest.json:
{
"name": "Redesign",
"version": "1.0",
"manifest_version": 2,
"options_ui": {
"page": "options.html",
"chrome_style": true
}
}
EDIT: Adding background.js code below that doesn't get latest options (after clicking save button on the options page) unless options modal is closed. The alert line below outputs the old saved option value...and the new saved value only after the options modal is closed.
chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
if (info.status == 'complete') {
chrome.storage.sync.get(['hideAds'], function(items) {
if(typeof items.hideAds !== 'undefined') {
hideAds = items.hideAds;
alert(hideAds);
}
})
doSomething(tab);
}
});
You could listen to chrome.storage.onChanged event in background page ( you would never need to listen to chrome.tabs.onUpdated for getting storage value), which fires when one or more items change:
chrome.storage.onChanged.addListener(function(changes, areaName) {
if(areaName === 'sync') {
const hideAdsChange = changes['hideAds'];
if(typeof hideAdsChange !== 'undefined') {
const newValue = hideAdsChange.newValue;
console.log(newValue);
}
}
});
Related
The target is get a WebExtension for Firefox that can be activated/deactivated by a user in the toolbar, like an on/off switch.
I'm using a background.js with this code:
browser.browserAction.onClicked.addListener(function (tab) {
switch (button) {
case 'turn-on':
enable();
break;
case 'turn-off':
disable();
break;
}
});
function enable() {
browser.browserAction.setIcon({ path: '/ui/is-on.png', });
browser.browserAction.setPopup({ popup: '/ui/turn-off.js', });
browser.webNavigation.onCommitted.addListener(onTabLoad);
}
function disable() {
browser.browserAction.setIcon({ path: '/ui/is-off.png', });
browser.browserAction.setPopup({ popup: '/ui/turn-on.js', });
browser.webNavigation.onCommitted.removeListener(onTabLoad);
}
function onTabLoad(details) {
browser.tabs.executeScript(details.tabId, {
file: '/gc.js',
allFrames true,
});
}
enable(); // enable or disable by default
Obviously I'm doing something wrong. I'm kind newbie in coding. This is a personal project I'm trying to finish.
Your code
While you added a switch statement to switch on button, you never defined button, nor changed its state. You also did not have a default case, just in case the button variable was not one of the values for which you were testing in your case statements.
You should not be using browserAction.setPopup() to set a popup. Setting a popup will result in the popup being opened instead of your background page receiving a click event. In addition, the popup needs to be an HTML page, not JavaScript.
See the section below for the Firefox bug which you need to work around in onTabLoad().
Listening to webNavigation.onCommitted is not sufficient to cover all cases of when your script will need to be injected. In other words, webNavigation.onCommitted does not fire every time a page is loaded. To fully cover every situation where your script will need to be injected is something that you will need to ask in another question.
var nextButtonState;
browser.browserAction.onClicked.addListener(function (tab) {
switch (nextButtonState) {
case 'turn-on':
enable();
break;
case 'turn-off':
default:
disable();
break;
}
});
function enable() {
browser.browserAction.setIcon({ path: '/ui/is-on.png', });
//browser.browserAction.setPopup({ popup: '/ui/turn-off.js', });
browser.webNavigation.onCommitted.addListener(onTabLoad);
nextButtonState = 'turn-off';
}
function disable() {
browser.browserAction.setIcon({ path: '/ui/is-off.png', });
//browser.browserAction.setPopup({ popup: '/ui/turn-on.js', });
browser.webNavigation.onCommitted.removeListener(onTabLoad);
nextButtonState = 'turn-on';
}
function onTabLoad(details) {
//Add a setTimout to avoid a Firefox bug that Firefox is not quite ready to
// have tabs.executeScript() inject a script when the onCommitted event fires.
setTimeout(function(){
chrome.tabs.executeScript(details.tabId, {
file: '/gc.js',
allFrames true,
});
},0);
}
enable(); // enable or disable by default
Workaround for a Firefox webNavigation.onCommitted bug
There is a change needed to your onTabLoad() code for using a webNavigation.onCommitted listener to inject scripts using tabs.executeScript() in Firefox (this is not needed in Chrome). This is due to a bug in Firefox which causes tabs.executeScript() to fail if executed immediately from a webNavigation.onCommitted listener. The workaround I use is to inject the script after a setTimeout(function,0) delay. This allows Firefox to execute the code needed to set up the environment necessary for executeScript() to be functional.
function onTabLoad(details) {
//Add a setTimout to avoid a Firefox bug that Firefox is not quite ready to
// have tabs.executeScript() inject a script when the onCommitted event fires.
setTimeout(function(){
chrome.tabs.executeScript(details.tabId, {
file: '/gc.js',
allFrames true,
});
},0);
}
Generalized solution for multi-state buttons (e.g. a toggle button)
The code I use to make a Browser Action button behave like a toggle is below. I have modified the browserButtonStates Object, which describes both what the buttons do and what they look like, to add and remove your webNavigation.onCommitted listener, onTabLoad(). See above for the issues with onTabLoad().
The code below is more complex than what you need. I wrote it intending to be able to move it from project to project with only needing to change the contents of the browserButtonStates object. Then, just by changing that object the icon, text, badge text, badge color, and action that is performed in each state (e.g. on/off) can be changed.
background.js
//The browserButtonStates Object describes the states the button can be in and the
// 'action' function to be called when the button is clicked when in that state.
// In this case, we have two states 'on' and 'off'.
// You could expand this to as many states as you desire.
//icon is a string, or details Object for browserAction.setIcon()
//title must be unique for each state. It is used to track the state.
// It indicates to the user what will happen when the button is clicked.
// In other words, it reflects what the _next_ state is, from the user's
// perspective.
//action is the function to call when the button is clicked in this state.
var browserButtonStates = {
defaultState: 'off',
on: {
icon : '/ui/is-on.png'
//badgeText : 'On',
//badgeColor : 'green',
title : 'Turn Off',
action : function(tab) {
chrome.webNavigation.onCommitted.removeListener(onTabLoad);
},
nextState : 'off'
},
off: {
icon : '/ui/is-off.png'
//badgeText : 'Off',
//badgeColor : 'red',
title : 'Turn On',
action : function(tab) {
chrome.webNavigation.onCommitted.addListener(onTabLoad);
},
nextState : 'on'
}
}
//This moves the Browser Action button between states and executes the action
// when the button is clicked. With two states, this toggles between them.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.browserAction.getTitle({tabId:tab.id},function(title){
//After checking for errors, the title is used to determine
// if this is going to turn On, or Off.
if(chrome.runtime.lastError){
console.log('browserAction:getTitle: Encountered an error: '
+ chrome.runtime.lastError);
return;
}
//Check to see if the current button title matches a button state
let newState = browserButtonStates.defaultState;
Object.keys(browserButtonStates).some(key=> {
if(key === 'defaultState') {
return false;
}
let state = browserButtonStates[key];
if(title === state.title) {
newState = state.nextState;
setBrowserActionButton(browserButtonStates[newState]);
if(typeof state.action === 'function') {
//Do the action of the matching state
state.action(tab);
}
//Stop looking
return true;
}
});
setBrowserActionButton(browserButtonStates[newState]);
});
});
function setBrowserActionButton(tabId,details){
if(typeof tabId === 'object' && tabId !== null){
//If the tabId parameter is an object, then no tabId was passed.
details = tabId;
tabId = null;
}
let icon = details.icon;
let title = details.title;
let text = details.badgeText;
let color = details.badgeColor;
//Supplying a tabId is optional. If not provided, changes are to all tabs.
let tabIdObject = {};
if(tabId !== null && typeof tabId !== 'undefined'){
tabIdObject.tabId = tabId;
}
if(typeof icon === 'string'){
//Assume a string is the path to a file
// If not a string, then it needs to be a full Object as is to be passed to
// setIcon().
icon = {path:icon};
}
if(icon) {
Object.assign(icon,tabIdObject);
chrome.browserAction.setIcon(icon);
}
if(title) {
let detailsObject = {title};
Object.assign(detailsObject,tabIdObject);
chrome.browserAction.setTitle(detailsObject);
}
if(text) {
let detailsObject = {text};
Object.assign(detailsObject,tabIdObject);
chrome.browserAction.setBadgeText(detailsObject);
}
if(color) {
let detailsObject = {color};
Object.assign(detailsObject,tabIdObject);
chrome.browserAction.setBadgeBackgroundColor(detailsObject);
}
}
//Set the starting button state to the default state
setBrowserActionButton(browserButtonStates[browserButtonStates.defaultState]);
manifest.json:
{
"description": "Demo Button toggle",
"manifest_version": 2,
"name": "Demo Button toggle",
"version": "0.1",
"background": {
"scripts": [
"background.js"
]
},
"browser_action": {
"default_icon": {
"32": "myIcon.png"
},
"default_title": "Turn On",
"browser_style": true
}
}
I am currently making a Google Chrome extension, and in the options I want the user to be able to choose between it being always on or only activating when clicked. To do this, I need an options.js and a background.js file, which I have. However, I am having a lot of trouble getting them to communicate properly. I tried using the chrome.storage api, but it won't do anything.
Here is my code for background.js:
chrome.browserAction.onClicked.addListener(function() {
// Send a message to the active tab
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {"message": tabs[0].url}, function(response));
});
});
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
// console.log(tabs.length);
chrome.tabs.sendMessage(tabs[0].id, {"message": tabs[0].url}, function(response) {});
});
}
});
And here is my code for options.js:
// Saves options to chrome.storage
function save_options() {
var behavior = document.getElementById('behavior').value;
chrome.storage.sync.set({
extensionBehavior: behavior
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved!';
setTimeout(function() {
status.textContent = '';
}, 1000);
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
// Use default value color = 'red' and likesColor = true.
chrome.storage.sync.get({
extensionBehavior: 'onClick'
}, function(items) {
document.getElementById('behavior').value = items.extensionBehavior;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
save_options);
If the behavior is set to "onClick", I only want the chrome.browserAction.onClicked.addListener portion to be executed. If the behavior is set to 'alwaysOn', then I only want the chrome.tabs.onUpdated.addListener portion to be executed. As far as debugging goes, both of those chunks work the way they're supposed to. I just need to know how to get one or the other to run based on the current options.
For the communication between option and background, it would be quite easy when you choose the localStorage to pass info between them. http://www.w3schools.com/html/html5_webstorage.asp
I am making a chrome extension to keep refreshing a page unless stop button is chosen. But i am able to do it only once. Here is my code for background.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.type) {
case "table-row-count_start":
alert("Refershing started");
RefreshAndCount();
break;
case "table-row-count_stop":
alert("Stop Refershing");
break;
}
return true;
});
var RefreshAndCount = function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {type: "table-row-count"});
chrome.browserAction.setBadgeText({tabId: tabs[0].id, text: "Counting!"});
});
};
In content.js I did this :
chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
alert(message.type);
switch(message.type) {
case "table-row-count":
var x = document.querySelector('table').rows.length;
chrome.storage.sync.set({'value': x}, function() {
console.log('Settings saved');
});
chrome.storage.sync.get(["value"], function(items){
console.log(items);
});
alert("Row count = " + x);
setTimeout(function(){
location.reload();
},100);
break;
}
});
chrome.storage.onChanged.addListener(function(changes, namespace) {
for (key in changes) {
if(key=='value'){
var storageChange = changes[key];
console.log('Storage key "%s" in namespace "%s" changed. ' +
'Old value was "%s", new value is "%s".',
key,
namespace,
storageChange.oldValue,
storageChange.newValue);
}
}
});
After refresh I want to print the current row count alert everytime. Please help how to do this .
This work fine, for a single refresh but after that I again had to choose the start button from popup.
I want some way that I need not click start button again and the whole process repeats, storing the previous row count in cache or something.
popup.js
window.onload = function() {
document.getElementById("mystartbutton").onclick = function() {
chrome.extension.sendMessage({
type: "table-row-count_start"
});
}
document.getElementById("mystopbutton").onclick = function() {
chrome.extension.sendMessage({
type: "table-row-count_stop"
});
}
}
Also help me How to keep on refershing that page even if I switch to other tab or minimise my chrome ?
You can use the chrome.storage.local to store data that will be saved over time and over context where you use it. You can set a boolean to true or false to enable or disable autoreload. Then you only have to set it at click on browser action and check it in the content-script to know if you have to reload.
A possible and simple implemtation should be like this : (It depends of the expected behavior)
content.js (have to be injected in the page to autoreload)
var reloadDuration = 5000;
function autoreload()
{
chrome.local.storage.get("autoreload_enabled", function(result)
{
if(result.autoreload_enabled)
{
chrome.runtime.sendMessage({type: "table-row-count"});
window.location.reload();
}
}
}
setTimeout(autoreload, reloadDuration);
This will reload your page every reloadDuration if the boolean set in chrome local storage named autoreload_enabled is true.
The code in buttonClicked() function and onTabCreate() function worked when the button is the BrowserAction icon.
But when I added a popup.html and created few buttons in it. When "Trello" button is clicked. I want the code in buttonClicked() to be executed, I put this code in eventPage.js.
The control is reaching the function, but I'm unable to capture the visible Tab now.
Why is it so? How can I fix this?
As evident from the code, imageData is holding the image of the tab (3rd line in buttonClicked())
The last 4th line in buttonClicked(), calls onTabCreate(). InonTabCreate(), I'm passing the imageData, but I'm not receiving the image.
I'll furnish more info if needed.
Thanks
buttonClicked()-
function buttonClicked() {
chrome.tabs.captureVisibleTab(null, {}, function (image) {
imageData = image;
createdTabUrl = chrome.extension.getURL('cardCreate.html');
chrome.tabs.query({ active: true }, function (tabs) {
var i, tab;
// Only select the current active tab, not any background tab or dev tools
for (i = 0; i < tabs.length; i += 1) {
// TODO: more robust way to check if current tab is a page from this extension (either when I get a static extension id or with a flag)
if (tabs[i].url.match(/^http/) || tabs[i].url.match(/^chrome-extension.*\/cardCreate\.html$/)) {
tab = tabs[i];
}
}
chrome.tabs.create({ url: createdTabUrl, index: (tab.index || 0) + 1 }, onTabCreated);
});
});
}
onTabCreate()-
// TODO: more robust way to send image data to page ?
function onTabCreated(tab) {
setTimeout(function (){
chrome.runtime.sendMessage({ imageData: imageData }, function(response) {
// Callback does nothing
});
}, 1000);
var views = chrome.extension.getViews();
for (var i = 0; i < views.length; i++) {
var view = views[i];
// If this view has the right URL and hasn't been used yet...
if (view.location.href == createdTabUrl) {
console.log("----------------------");
// console.log(view);
// console.log(view.location.href);
}
}
}
chrome.browserAction.onClicked.addListener(buttonClicked);
EDIT :
window.onload = function() {
document.getElementById('loginText').addEventListener('click', login);
document.getElementById('Trello').addEventListener('click', buttonClicked);
//listener for ButtonClick
// In popup.html , I included eventPage.js as well.
};
I am creating an extension that I need to have the ability to run the content script multiple times when clicking on the page action button. I have this in my background.js:
chrome.pageAction.onClicked.addListener(function(tab) {
alert('calling content_script');
chrome.tabs.executeScript(null, {
file: 'content_script.js'
},function(){alert("success");});
});
This works the first time the button is clicked. When clicked a second time, I get my popup saying "calling content_script" but the content script is never executed. Why is this?
Here is the background script in its entirety:
function checkForValidUrl(tabId, ChangeInfo, tab){
if(tab.url.indexOf("tiger.armstrong")> -1){
chrome.pageAction.show(tabId);
if(tab.url.indexOf("tiger.armstrong") == 0){
chrome.pageAction.hide(tabId);
}
}
}
chrome.tabs.onUpdated.addListener(checkForValidUrl);
chrome.pageAction.onClicked.addListener(function(tab) {
alert('calling content_script');
chrome.tabs.executeScript(null, {
file: 'content_script.js'
},function(){alert("success");});
});
Here is the manifest:
{
"name": "LiveLab Post Grades",
"version": "2.0",
"permissions": [
"activeTab","tabs","http://*/*","https://*/*"
],
"background": {
"scripts": ["jquery.min.js","background3.js"],
"persistent": false
},
"page_action": {
"default_icon": {
"19": "GIcon.png"
},
"default_title": "LiveLab Tools"
},
"content_scripts": [ {
"js": [ "jquery.min.js" ],
"matches": [ "http://*/*", "https://*/*"],
"run_at": "document_end"
}],
"manifest_version": 2
}
Here is the content script:
var livelabtools = {
/**
* this function is like window.open, but it can POST (rather than GET) from js
* source: http://canop.org/blog/?p=426
*/
canop_open: function (verb, url, data, target) {
var form = document.createElement("form");
form.action = url;
form.method = verb;
form.target = target || "_self";
if (data) {
//for (var key in data) {
var input = document.createElement("input");
input.name = 'data';
input.value = data;//typeof data[key] === "object" ? JSON.stringify(data[key]) : data[key];
form.appendChild(input);
//console.log(form);
//}
}
// these two lines are only needed for ie
//form.style.display = 'none';
//document.body.appendChild(form);
form.submit();
console.log("form submit === " + form);
form.remove();
},
post_grades: function () {
alert('in post grades!!!!');
var str, exercise,
i = 0;
grades = {};
do {
ex_str = "form1:tabSet1:tabInstr:lp2:tabSet4:tabp:lpProgress:ts1:tab7:lp7:table3:rg3:" + i + ":tc3:st3";
lname_str = "form1:tabSet1:tabInstr:lp2:tabSet4:tabp:lpProgress:ts1:tab7:lp7:table3:rg3:" + i + ":tc1:st1";
grade_str = "form1:tabSet1:tabInstr:lp2:tabSet4:tabp:lpProgress:ts1:tab7:lp7:table3:rg3:" + i + ":tc7:st7_field";
exercise = document.getElementById(ex_str);
lname = document.getElementById(lname_str);
grade = document.getElementById(grade_str);
if (exercise != null) {
if (grades[lname.innerHTML] === undefined)
grades[lname.innerHTML] = {};
console.log(lname.innerHTML + ", " + exercise.innerHTML + ", " + grade.innerHTML);
if (grade.value != null && grade.value != '')
grades[lname.innerHTML][exercise.innerHTML] = grade.value;
else
grades[lname.innerHTML][exercise.innerHTML] = "0";
}
i++;
} while (exercise != null);
// console.log(JSON.stringify(grades));
// console.log(JSON.stringify(grades).length)
//window.open("http://aspen2.cscofc.info/jsontocsv.php?data="+JSON.stringify(grades));
console.log('posting...' + "\n JSON.String... = "+ JSON.stringify(grades));
livelabtools.canop_open("post", "http://aspen2.cscofc.info/jsontocsv.php", JSON.stringify(grades));
console.log('done');
return "function end";
}
}
console.log(livelabtools.post_grades());
I won't go into detail about it, unless asked but the important parts to note are the return statement and the console log. Everything runs perfectly fine the first time the page action button is clicked, and when finished, I get "function end" printed to the console. After the initial run, however, whenever I click on the page action button, I get an alert saying "calling content_script" and nothing else happens. Why won't my content script run more than once?
It seems like when a script has already been injected it is not injected again.
So, the way to go would be to initiate your action by passing a message to the content script. (Of course, if the content script has not been injected yet, you need to inject it first.)
One solution I came up with (and after testing confirmed it works fine) is the following:
On pageAction.onClicked send a message from the background page to the content script, asking it to do something (e.g. post the grades). Also, request a response to be sent back to the background page.
[See, also, chrome.tabs.sendMessage(...).]
If the content script has already been injected, have it receive the message, send a confirmation back to the background page and proceed doing something (e.g. posting the grades). This process can take place as many times as you want.
[See, also, chrome.runtime.onMessage.]
The first time that the pageAction.onClicked is fired, there will be no content script listening for messages. In that case, there will be no message confirmation. Instead chrome.runtime.lastError will be set. In that case, the background page will have to inject the content script first and then send the message again.
[See, also, chrome.runtime.lastError.]
Theoreticaly speaking, that should do it !
Practicaly, this is the sample code that worked for me:
manifest.json:
(Note: If you have more specific requirements regarding the pages you need to access, you could incorporate them into the manifest and get rid of some of the permissions.)
{
...
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"page_action": {
"default_title": "Test Extension"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
...
}
background.js:
function checkForValidURL(tabId, info, tab) {
var idx = tab.url.indexOf("tiger.armstrong");
if (idx > 0) {
chrome.pageAction.show(tabId);
} else {
chrome.pageAction.hide(tabId);
}
}
chrome.tabs.onUpdated.addListener(checkForValidURL);
function onPageActionClicked(tab) {
// Send message to content script, asking to post grades
alert("Calling content_script...");
chrome.tabs.sendMessage(tab.id, { action: "postGrades" }, function() {
if (chrome.runtime.lastError) {
// The error indicates that the content script
// has not been injected yet. Inject it and...
chrome.tabs.executeScript(tab.id, {
file: "content.js"
}, function() {
if (!chrome.runtime.lastError) {
// ...if injected successfully, send the message anew
onPageActionClicked(tab);
}
});
} else {
// The content script called our response callback,
// confirming that it is there and got our message
alert("Message got through !");
}
});
};
chrome.pageAction.onClicked.addListener(onPageActionClicked);
content.js:
var livelabtools = {
/**
* This function is like window.open, but it can POST (rather than GET) from
* JS source: http://canop.org/blog/?p=426
*/
canop_open: function (method, url, data, target) {
var form = document.createElement("form");
form.action = url;
form.method = method;
form.target = target || "_self";
// 'data' is an object with key-value pairs
// of fields to be sent
if (data) {
for (var key in data) {
var input = document.createElement("input");
input.name = key;
input.value = (typeof(data[key]) === "object")
? JSON.stringify(data[key]) : data[key];
form.appendChild(input);
}
}
form.submit();
form.remove();
},
post_grades: function () {
console.log("Posting some grades...");
livelabtools.canop_open("POST",
"http://aspen2.cscofc.info/jsontocsv.php",
"{}");
console.log("Grades sent !");
}
}
// Listen for messages from the background page
// (It actually listens for messages from anyone in the context,
// but the background page is the one that interrests us)
chrome.runtime.onMessage.addListener(function(msg, sender, response) {
// If we've been asked to post grades...
if (msg.action && (msg.action == "postGrades")) {
// ...confirm we got the message and...
response();
// ...do what we do best: post grades !
livelabtools.post_grades();
}
});
Let's hope this covers it :)