how do i toggle on/off content_scripts in a google extension? - javascript

I have this simple extension, it displays icon on chrome's toolbar and shows a enable/disable button. i want to add function to the button to disable or enable the content_script.js which fires on visiting google website:
popup.js
var setLayout = function(){
var list = document.createElement('ul');
var enable = document.createElement('li');
enable.appendChild(document.createTextNode('Enable Script'));
enable.onclick = function(){toggle(0)};
var disable = document.createElement('li');
disable.appendChild(document.createTextNode('Disable Script'));
disable.onclick = function(){toggle(1)};
list.appendChild(disable);
document.body.appendChild(list);
function toggle(n){
list.removeChild( n == 0 ? enable : disable);
list.appendChild(n == 0 ? disable : enable);
}
};
document.addEventListener('DOMContentLoaded', setLayout, false);
manifest.json
{
"manifest_version": 2,
"name": "test",
"description": "test",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["https://www.google.co.uk/"],
"js": ["content_scripts.js"]
}
]
}
content_scripts.js
(function(){
alert('hello');
})();
i'm new to google extensions and have no idea how to do that, i thought about changing the manifist after clicking disable/enable buttons but couldn't find the right command to do so after reading the documentations on google website!
any help would be greately appreciated.

After some research i figured out how to solve this by using backround pages, sendMessage and localstorage.
background pages work as a communicator between popup.js and content_scripts.js, they are on two different documents and it's not possible to pass variables between them directly.
To enable background page in mamifest i added:
"background": {
"scripts": ["background.js"],
"persistent": true
},
localstorage save variables locally and remember them even when the browser is closed and opened again, so when enable/disable button is clicked it set localStorage['status'] = 1/0 which can be accessed through background.js and passed to content_scripts.js.
To set localStorage variable i added to popup.js:
if(!localStorage.status) localStorage['status'] = 1;
toggle(2);
enable.onclick = function(){toggle(0)};
disable.onclick = function(){toggle(1)};
function toggle(n){
if((n == 0) && (enable.parentNode == list)){
list.removeChild(enable);
list.appendChild(disable);
localStorage.status = 1;
}else if((n == 1) && (disable.parentNode == list)){
list.removeChild(disable);
list.appendChild(enable);
localStorage.status = 0;
}else if((n == 2) && (!list.hasChildNodes())){
list.appendChild((localStorage.status == 1) ? disable : enable);
chrome.browserAction.setIcon({path: (localStorage.status == 1) ? "icons/icon19.png" : "icons/icon19_disabled.png"});
}else{
return;
}
}
To pass localStorage.status to content_scripts.js i had to use sendMessage on content_scrips.js which on loaded send request message to background.js, and onMessage on background.js which listens to requests and send response to content_scripts.js with the localStorage.status value.
background.js:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.type == "status") sendResponse({status: localStorage.status});
});
content_scripts.js
var fn = function(){...};
chrome.runtime.sendMessage({type: "status"}, function(response) {
if(response.status == 1) fn();
return;
});
That's it, hope someone find it useful.

Try injecting the content script using code rather than the manifest file, something like this:
chrome.tabs.executeScript(null, {file: "content_script.js"});
You can then use message passing between the background page and your content script to decide whether or not to inject the content script, or perhaps an if statement in the content script itself that only runs when a flag set by the extension's action button.
You can use a browser action event to detect when the action button is pressed.

Related

Chrome extesnion add text to Editable with context menu

I am trying to add text to an editable field with a context menu.
I tried to follow this SO but I cannot seem to get it to add the text to the field.
This is my content, which seems to make sense. I believe it is adding the context for what the background script is looking for.
var clickedEl = null;
document.addEventListener("mousedown", function(event){
//right click
if(event.button == 2) {
clickedEl = event.target;
}
}, true);
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request == "getClickedEl") {
sendResponse({value: clickedEl.value});
}
});
And here is what I have for my Background script. This is the part where I am not sure if I am doing it correctly.
function onClickHandler(info, tab) {
if (info.menuItemId.indexOf("context") > -1) {
var type = info.menuItemId.replace('context', '');
theLog = type;
function mycallback(info, tab) {
chrome.tabs.sendMessage(tab.id, "getClickedEl", function(clickedEl) {
elt.value = theLog.value;
});
}
}
}
Your background script runs in a separate hidden page with its own URL and DOM, which cannot access the web page directly, see the architecture overview in the documentation. Simply send the text to the content script, which will then use document.execCommand to insert the value into the active element.
Solution 1.
content script:
chrome.runtime.onMessage.addListener(msg => {
document.execCommand('insertText', false, msg);
});
background script:
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId.includes('context')) {
const text = info.menuItemId.replace('context', '');
chrome.tabs.sendMessage(tab.id, text, {frameId: info.frameId || 0});
}
}
Note we're sending directly to the frame where the context menu was invoked, which is needed in the general case (maybe not in yours) with the content script running in all iframes which is declared in manifest.json:
"content_scripts": [{
"matches": ["<all_urls>"],
"all_frames": true,
"match_about_blank": true,
"js": ["content.js"]
}]
Solution 2.
However, if this is the only function of the content script, it's better not to declare it in manifest.json at all, but instead inject dynamically in the background script:
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId.includes('context')) {
const text = info.menuItemId.replace('context', '');
chrome.tabs.executeScript(tab.id, {
frameId: info.frameId || 0,
matchAboutBlank: true,
code: `document.execCommand('insertText', false, ${JSON.stringify(text)})`,
});
}
}
And add the permission in manifest.json that doesn't require a user confirmation on installation (documentation):
"permissions": ["activeTab"]

Chrome extension run Javascript on X next tabs

I'm making an extension and I can't understand how to do the following -
My extensions currently open X amount of tabs, according to a specific text. Now I want it to run a specific script in every new tab it opens.
Manifest.json:
{
"name": "Asaf Feedback Opener",
"version": "1",
"manifest_version" : 2,
"description": "Opens any View Item on the current page",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "icon.png"
},
"permissions": ["activeTab", "tabs"]
}
Now it runs the following code in the current page of clicking:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "testScript.js"});
});
Javascript:
var links = document.getElementsByTagName("a");
numofview = 0;
for (i = 0; i < links.length; i++)
{
if (links[i].innerHTML.startsWith("View Item"))
{
numofview = numofview+1;
window.open(links[i].getAttribute("href"), "_blank");
}
}
Now, In the above JS It opens links in a new tab. I want the next code to run in every tab that the previous code had opened:
var soldlinks = document.getElementsByTagName("a");
for (i = 0; i < soldlinks.length; i++)
{
if (soldlinks[i].innerHTML.endsWith("sold"))
{
var soldlength = soldlinks[i].innerHTML.length
var amount = soldlinks[i].innerHTML.substring(0,soldlength-5);
if (Number(amount) >= 5)
window.open(soldlinks[i].getAttribute("href"), "_self");
else
window.close()
}
}
I actually don't know JS or the chrome extensions coding language at all, I've been improvising with google to get this far.
Both scripts work in separate, I don't how to go forward from here.
Make your injected content scripts only collect and return the URLs to the background page script by leaving the data as the last expression in the file (see the code below). It will be available in executeScript's callback parameter which is an array of results per each frame in a tab so our data is inside its element 0 (main frame is 0 = the page itself).
The background page script will open the tabs and use executeScript to inject the new content script into the opened tabs. This will require additional permissions in manifest.json for the opened sites or all URLs if you don't know which sites may be referred:
"permissions": ["<all_urls>", "tabs"]
Use an event page that's automatically unloaded when your extension is not used.
"background" : {
"scripts" : ["event.js"],
"persistent": false
},
event.js (previously background.js now renamed for clarity):
chrome.browserAction.onClicked.addListener(collectViewItems);
function collectViewItems(tab) {
chrome.tabs.executeScript(tab.id, {file: 'collect-view-items.js'}, results => {
results[0].forEach(openViewItem);
});
}
function openViewItem(url) {
chrome.tabs.create({url, pinned: true, active: false}, collectSoldItems);
}
function collectSoldItems(tab) {
chrome.tabs.executeScript(tab.id, {file: 'collect-sold-items.js'}, results => {
chrome.tabs.remove(tab.id);
results[0].forEach(openSoldItem);
});
}
function openSoldItem(url) {
chrome.tabs.create({url, active: false});
}
collect-view-items.js:
[...document.links]
.filter(a => a.textContent.trim().startsWith('View Item'))
.map(a => a.href);
collect-sold-items.js:
[...document.links]
.filter(a => a.textContent.trim().endsWith('sold') && parseInt(a.textContent) >= 5)
.map(a => a.href);
ES2015 syntax is used, available in modern browsers by default.

Chrome vs. Firefox Extensions

I wrote a simple extension for Firefox. Unfortunately, my friend uses Chrome, and I don't understand why the same code does nothing in Chrome. What's the difference between Firefox's Tabs and Chrome's Tabs? Here's the code:
Manifest.json:
{
"manifest_version": 2,
"name": "customAddon",
"description": "Unsurprisingly, this addon does things.",
"version": "1",
"background": {
"persistent": true,
"scripts": ["customAddon.js"]
},
"permissions": [
"tabs",
"http://*.com/"
]
}
customAddon.js:
chrome.tabs.onUpdated.addListener(function(tabId , info) {
if (info.status == "complete") {
if (window.location.href == 'http://ninjakiwi.com/Games/Action/Play/SAS-Zombie-Assault-4.html') {
var elem = document.getElementById('secondary');
elem.innerHTML = '';
var removeLinks = (function() {
return function(passedElems){
for (i = 0; i < passedElems.length; i++) {
passedElems[i].setAttribute('onclick','return false;');
}}})();
removeLinks(document.getElementsByClassName('group'));
removeLinks(document.getElementsByClassName('nav'));
removeLinks(document.getElementsByClassName('local-skin'));
document.getElementsByClassName('header-bar')[0].setAttribute('style','padding-left:85px; padding-right:-85px;');}}
}
});
Your customAddon.js code runs is a separate, invisible page, called the background page.
Of course, its location.href will never be that URL, and its elements will never match what you expect.
What you really need is a content script. You can set the filter that tells which page it should be loaded in, and then it will execute with access to the page's DOM, which is precisely what you need. No need to use tabs API.

How can I determine if a Chrome extension is in a popup from the content script?

Background
I have a Chrome extension with a browser action to launch index.html in a new tab.
I'd like to update the extension to open index.html in a popup first, and then include a button users can click to optionally open the app in a new tab.
I don't want this button to show when it's not a popup (since it wouldn't make sense), which means the content script needs to know whether it is a popup in order to show the button.
Questions
This is a two part question:
How does a Chrome extension popup know it's a popup?
How do I pass that information to a content script before the popup is rendered?
What I've tried
I've tried to use chrome.extension.getViews in background.js to firstly determine if a popup is open. Then, I send a message to the content script which then shows the button. However I haven't gotten it to work - views is always an empty array, and the message doesn't seem to ever be received by the content script.
Here are the relevant parts of my manifest.json file:
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": {
"19": "img/icon19.png",
"38": "img/icon38.png"
},
"default_title": "Super Simple Tasks",
"default_popup": "index.html"
}
And here's what I've been trying in my background.js:
// Get all popups
var views = chrome.extension.getViews({ type: "popup" });
// Send a message if there is a popup
if (views.length > 0){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {action: "popup_open"}, function(response) {});
});
};
And then in my content script, I listen for the message and then add a class to the body:
// Listen for the message
chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.action === 'popup_open') {
// My code here to show the button
}
});
After talking with a friend I discovered an elegant solution that doesn't involve messaging or even a background.js script at all.
I can specify ?popup=true in manifest.json and check for that parameter in my extension's content script. Here's the code:
manifest.json now looks like this:
"browser_action": {
"default_icon": {
"19": "img/icon19.png",
"38": "img/icon38.png"
},
"default_title": "Super Simple Tasks",
"default_popup": "index.html?popup=true"
}
The following code in my content script (taken from this answer) checks for ?popup=true. Worth noting that this function can handle multiple URL parameters split by the & character.
function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
var isPopup;
isPopup = getUrlParameter('popup') === 'true';
Finally, add a class to the body if it's a popup:
$('body').toggleClass('popup', isPopup)
In the manifest file add a hash to the url:
"browser_action": {
"default_popup": "index.html#popup"
}
In JavaScript:
if (location.hash === '#popup')
// do something awesome!
I needed something similar as i wanted to create some cross-compatible code for all script types.
I found that this worked quite well.
const SCRIPT_TYPE = (() => {
if (chrome && chrome.extension && chrome.extension.getBackgroundPage && chrome.extension.getBackgroundPage() === window) {
return 'BACKGROUND';
} else if (chrome && chrome.extension && chrome.extension.getBackgroundPage && chrome.extension.getBackgroundPage() !== window) {
return 'POPUP';
} else if (!chrome || !chrome.runtime || !chrome.runtime.onMessage) {
return 'WEB';
} else {
return 'CONTENT';
}
})();
chrome.tabs.getCurrent(function(tab) {
if(tab == undefined)
document.getElementById('mButton').style.display = 'inline-block';
});
I initially set the button's display: none; if the returned tab is undefined, means it's not a tab (so it is popup) and then I display button. You can reverse it of course.
======
Well the sending parameter also works, which in that case you won't need to add the query string in the manifest, just adding it in button's click listener would suffice.
btn.addEventListener('click', function() {
chrome.tabs.create({url: "index.html?popup=false"});
});
And then the same process (reading the query string and comparing, etc).
======
Alternatively you can make a copy of index.html say index2.html, remove the button from index.html, use index2.html in the manifest and index.html for button click. :)

Chrome Extension: How to reload tab from anywhere using keyboard events?

I am having issues with getting access to the Chrome's tab ID. I can fetch it, but it remains inside the extension and I cannot use it outside the extension, despite the fact that I was able to record keyboard events outside the extension.
Here's what I'm trying to do:
User navigates to a tab and fetches the tabId with a 'capture' button
The tabId is stored as a global variable
User then can navigate to any other tab inside his browser and from there with a key combination the user can reload the captured tab at any given moment by pressing CTRL + SHIFT simultaneously
extension.html
<!DOCTYPE html>
<html>
<head>
<title>Extension</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
</style>
<p>Step 1. Navigate to tab you want to refresh and click the 'capture' button</p>
<button type="button" id="capture">Capture!</button>
<p id="page"></p>
<p>Step 2. Now you can reload that tab from anywhere by pressing CTRL+SHIFT simultaneously</p>
</div>
<script src="contentscript.js"></script>
</head>
<body>
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Extension",
"description": "This extension allows you to trigger page refresh on key combinations from anywhere",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"run_at": "document_end",
"js": ["contentscript.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "extension.html"
},
"web_accessible_resources": ["script.js"],
"permissions": [
"tabs"
],
}
contentscript.js
var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
(document.head||document.documentElement).appendChild(s);
s.parentNode.removeChild(s);
script.js
'use strict';
var isCtrl = false;
var tabId = 0;
document.onkeyup=function(e){
if(e.which === 17) {
isCtrl=false;
}
};
document.onkeydown=function(e){
if(e.which === 17) {
isCtrl=true;
}
if(e.which === 16 && isCtrl === true) {
/* the code below will execute when CTRL + SHIFT are pressed */
/* end of code */
return false;
}
};
document.getElementById('capture').onclick = function(){
chrome.tabs.getSelected(null, function(tab) {
tabId = tab.id;
document.getElementById('page').innerText = tab.id;
});
};
I thought this would be the solution, but it didn't work:
/* the code below will execute when CTRL + SHIFT are pressed */
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.reload(tabId);
});
/* end of code */
Having var tabId = 0; as a global variable seems pointless so I thought message passing should be the solution, but the problem with that is that I don't understand how I should implement it.
Any suggestions on how to refresh the tab from anywhere based on its ID?
Your contentscript.js is just a file with programmatic instructions written in JavaScript. Those instructions are interpreted as fresh and new each time they are loaded into a particular execution environment. Your popup and your content scripts are separate execution environments.
The contentscript.js file itself does not store state. When contentscript.js is loaded in a content script environment, the content script execution environment has no idea where else contentscript.js has been included.
The correct pattern to use here would be to have a background page maintain state and remember the tab ID of the last captured tab. The popup would use message passing to send the current tab ID to the background page (using chrome.runtime.sendMessage in the popup and chrome.runtime.onMessage in the background page). Then, later, the content script would send a message to the background page when it saw a Ctrl+Shift press, and the background page would invoke chrome.tabs.reload(tabId).
Inside extension.html, instead of your current <script> tag:
document.getElementById("capture").onclick = function() {
chrome.tabs.getSelected(null, function(tab) {
tabId = tab.id;
// send a request to the background page to store a new tabId
chrome.runtime.sendMessage({type:"new tabid", tabid:tabId});
});
};
Inside contentscript.js:
/* the code below will execute when CTRL + SHIFT are pressed */
// signal to the background page that it's time to refresh
chrome.runtime.sendMessage({type:"refresh"});
/* end of code */
background.js:
// maintaining state in the background
var tabId = null;
// listening for new tabIds and refresh requests
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
// if this is a store request, save the tabid
if(request.type == "new tabid") {
tabId = request.tabid;
}
// if this is a refresh request, refresh the tab if it has been set
else if(request.type == "refresh" && tabId !== null) {
chrome.tabs.reload(tabId);
}
});

Categories