Hi, im triying to make a addon that change words on a website. The add-on works fine, but I want to add the option to the user to turn it on/off with a button.
For do that I use this function in a .js file:
> (function() {
> walk(document.body);
> function walk(node) {
> // This wonderful function was made by T.J. Crowder
> // Check it out here: http://stackoverflow.com/a/5904945
> var child, next;
> switch (node.nodeType) {
> case 1:
> case 9:
> case 11:
> child = node.firstChild;
> while (child) {
> next = child.nextSibling;
> walk(child);
> child = next;
> }
> break;
> case 3:
> maduroText(node);
> break;
> }
> }
> function maduroText(textNode) {
> var val = textNode.nodeValue;
> val = val.replace(/Nicolás/g, "Gordo");
> val = val.replace(/nicolás/g, "gordo");
> val = val.replace(/Nicolas/g, "Gordo");
> val = val.replace(/nicolas/g, "gordo");
> val = val.replace(/Maduro/g, "Comunista");
> val = val.replace(/maduro/g, "comunista");
> val = val.replace(/Moros/g, "Feo");
> val = val.replace(/moros/g, "feo");
> textNode.nodeValue = val;
> }
> })();
Someone tried to help me and give me this code for make the button option using a background.js, but I’m not quiet sure how add the js function in this one:
//This toggles the Browser Action button between two states.
// You could expand this to as many states as you desire.
// For testing the state is indicated by the badge and badge color.
// You should seriously consider using a change in icon rather
// than the badge text and color to indicate the state. Badges
// should really be for for alerting the user to status changes
// that the user did not cause. However, for testing and
// development , I find it much easier to just use a badge.
var browserButtonStates = {
on: {
//icon: //A string, or full details Object for browserAction.setIcon()
text : 'On',
color : 'green',
title : 'Turn Off' //Indicating to user what _will_ happen with click.
},
off: {
//icon: //A string, or full details Object for browserAction.setIcon()
text : 'Off',
color : 'red',
title : 'Turn On' //Indicating to user what _will_ happen with click.
}
}
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;
}
if(title === browserButtonStates.off.title) {
//Turnging On
//Only include tab as a parameter if on/of by tab.
setBrowserActionButton(browserButtonStates.on);
turnOn(tab);
} else {
//Turning Off
//Only include tab as a parameter if on/of by tab.
setBrowserActionButton(browserButtonStates.off);
turnOff(tab);
}
});
});
function turnOn(tab){
//Turn OFF whatever processing is done. If you are doign this on a per tab basis,
// then the tab is available.
}
function turnOff(tab){
//Turn ON whatever processing is done. If you are doign this on a per tab basis,
// then the tab is available.
}
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.text;
let color = details.color;
//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);
}
}
setBrowserActionButton(browserButtonStates.off);
I already change my manifest for use the background.js to this:
{
"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 hope someone can help me. Thanks.