Load content script into all tabs, but only if the content script is not already loaded - google-chrome-extension

Problem
My chrome extension needs to inject the content script into all tabs when switched on and then when any new tabs are loaded etc.
By adding the content script to the manifest file I can satisfy the second requirement of having it loaded in newly loaded tabs.
To make it also inject the content script into tabs as soon as the extension is loaded or refreshed (there is no popup), I am using chrome.scripting.executeScript.
Problem is each time the extension is turned off/on or refreshed, the content script is loaded in again and any DOM manipulation from content script occurs multiple times.
So from reading another post, I liked the idea of sending a message to the content script, if I don't get a response (undefined) then I inject the script into this tab, if I do get a response then do nothing.
In my background logs I get this error Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist. which is what I would expect if the content script did not exist, but even when the content script is clearly being loaded, I still get the same error.
Any help greatly appreciated. And maybe this is not even the best approach for this, I am not sure. Ideally I would also want the extension to immediately stop working when it's turned off, but I haven't got around to this problem yet.
Manifest
{
"name": "Text highlighter",
"description": "Text highlighter",
"version": "1.0.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"css": [ "styles.css" ]
}
],
"permissions": ["storage", "activeTab", "scripting", "tabs"],
"host_permissions": ["<all_urls>"]
}
self.oninstall = () => {
chrome.tabs.query({}, function(tabs) {
tabs.forEach((tab) => {
chrome.tabs.sendMessage(tab.id, true, (response) => {
console.log('response', response);
if(!response) {
chrome.scripting.executeScript({
target: {tabId: tab.id},
files: ['content.js']
});
chrome.scripting.insertCSS({
target: { tabId: tab.id },
files: ['styles.css']
});
}
});
});
});
};
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log('request', request);
sendResponse(true);
return true;
});

Related

How to access iframes using scripting API?

I have a chrome extension I need to access all the iframes on the attached page using the scripting API
{
"manifest_version": 3,
"name": "My example extension",
"version": "0.0.1",
"permissions": ["tabs", "scripting"],
"devtools_page": "devtools.html",
"host_permissions": [
"<all_urls>"
]
}
I can run the script on the inspectedWindow easily enough
// devtools.html -> js
chrome.devtools.panels.create("Sample Panel", "icon.png", "/panel.html", panel => {
// code invoked on panel creation
});
// panel.html -> js
chrome.scripting.executeScript({
target: { tabId: chrome.devtools.inspectedWindow.tabId },
injectImmediately: true,
func: () => {
console.log('foo')
}
})
I want this script to run on the page and all children iframes immediately (before anything else is run, just like a content_script).
It seems this only runs on the host page. When I try to query for child iframes, it doesn't seem to find anything
> await chrome.tabs.query({ windowId: chrome.devtools.inspectedWindow.tabId })
// []
Did I miss a permission?

save REQUEST body(payload) of POST REQUEST through chrome extension

we are looking to read/save a POST REQUEST's body/payload through chrome extension.
Scenario: a target webpage will submit a post request to server once in a while.
Requirement: chrome extension's popup.html has a button with id='startIntercept' and upon clicked we need to save the next firing post request's all details(headers, payload) to a session variable.
we only need to save what post request is been sent from current tab. we are not bothered what response we received for the post request.
through a source we came to know a way to achieve it by "Overwriting window.XMLHttpRequest.prototype.open method" by saving old open method to a variable and create a new open method to intercept any request and save it then pass parameters to old open method to get usual expected page functionality.
code used:
//popup.js
let startIntercept = document.getElementById("startIntercept");
startIntercept.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ["startWork.js"],
});
});
//startWork.js
let oldXHROpen = window.XMLHttpRequest.prototype.open;
console.log('script injected');
window.XMLHttpRequest.prototype.open = function() {
this.addEventListener("load", function() {
const responseBody = this.responseText;
sessionStorage.setItem('payload', responseBody );
});
return oldXHROpen.apply(this, arguments);
};
//manifest.json
"name": "extTracker",
"description": "want to save post request details",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"host_permissions": ["<all_urls>"],
"permissions": ["storage", "activeTab", "scripting"],
"web_accessible_resources": [{
"resources": ["/assets/media/blinkSd.mp3"],
"matches": ["<all_urls>"],
"use_dynamic_url": true
}],
"action": {
"default_popup": "popup.html",
},
*once we have a working model we will enhance manifest file/filter requests to intercept accordingly
the above code fails to save/intercept any request made from current tab even through script 'startWork.js' is successfully injected.
why it fails?? any better approach to achieve this functionality?
Your Expertise and Time are very much appreciated. Thank You

Chrome Extension page reload

I'm writing a chrome extension and it has both a content.js to manipulate the current tab data as well as a popup that is generated upon execution. However, my problem is that when i make changes to the extension, I have to both reload the extension and refresh the page, otherwise it give me a "Error establishing connection, port does not exist" error. Here's my manifest.json file
{
"manifest_version": 2,
"name": "extension",
"version": "0.0",
"offline_enabled": true,
"content_scripts": [
{
"matches": [
"*://mail.google.com/*"
],
"css": ["css/jquery-ui.css"],
"js": ["js/jquery.js" , "js/jquery-ui.js" , "js/bootstrap.js" , "js/commons.js" , "js/content.js"],
"run_at": "document_end"
}
],
"browser_action": {
"default_title": "chrome",
"default_popup": "html/popup.html"
},
"permissions": [
"tabs",
"https://*.*.*/"
]
}
This is normal behaviour. When you make changes in your extension you have to reload it. But when you reload extension, all existing content script injections lost their connections with background page. More than that, if you try to reconnect on port.onDisconnected.addListener you will get an exception, for security reasons, because new background process will not be able to recognize its previous content script injections.
When I run into this issue I came up with this solution:
reconnect();
function reconnect() {
var port = chrome.runtime.connect({
name: 'injection'
});
port.onMessage.addListener(handleMessage);
port.onDisconnect.addListener(function() {
console.log('bg script disconnected');
setTimeout(function() {
try {
reconnect();
} catch (e) {
location.href = location.href;
}
}, 1000);
});
}
function handleMessage() {
}
I know, this is nothing just automatic page reloading, but there's no other way to reconnect from previous content script injection - updated extension code must be injected again in order to be able to connect to background script.

Chrome Extension Send Message From Background.js to Content Script

I have read the documentation on how to do Send Message From background javascript file(main.js) to Content Script (content.js) but I cannot get the onMessage to open my alert.
Manifest.json
{
"name": "Example",
"version": "1.0.1",
"manifest_version" : 2,
"description": "Example Description",
"background" : {
"scripts" : ["main.js"]
},
"page_action" : {
"default_icon": {
"19": "icons/19.png",
"38": "icons/38.png"
},
"default_title" : "Example Title"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["lib/jquery-1.8.3.min.js","scripts/content.js"],
"run_at": "document_idle",
"all_frames": false
}],
"permissions": [
"tabs",
"geolocation"
],
"icons": {
"16": "icons/16.png",
"48": "icons/48.png",
"128": "icons/48.png"
}
}
Background javascript file (main.js)
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {action: "SendIt"}, function(response) {});
});
Content javascript file (content.js)
chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.action == 'SendIt') {
alert("Message recieved!");
}
});
Thanks to the insight of #Teepeemm I have included a tab load complettion before sending message to content script.
WAIT FOR TAB TO BE FULLY LOADED
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {action: "SendIt"}, function(response) {});
});
}
});
Sidenote: chrome.extension.onMessage is deprecated, you should be using chrome.runtime.onMessage - although I don't believe this will solve your problem.
I remember that I had an issue injecting a minified jquery file using content scripts. Try to use an un-minified version (ie jquery-1.8.3.js). Once you have done that, also add jquery-1.8.3.js to web_accessible_resources in your manifest file. (Read about that here)
If it still doesn't work, my last suggestion would be to add "<all_urls>" to the permissions array in your manifest.
If you have each script announce its presence (I prefer console.log to alert), you see that the background script runs once (on installation or startup), while the content script runs with each new page. This means that you'll want to have some external event trigger the message. Something like
chrome.pageAction.onClicked.addListener(function(tab) {
chrome.tabs.sendMessage(tab.id,{action:"SendIt"});
});
And don't forget to call chrome.pageAction.show(tabId); as appropriate.

How to allow an extension for two domains only?

I've written a google chrome extension. It's okay and works now but I want the extension to be usebale only on two domains because it's written for these two websites only and is useless for others. There is a context menu only. For now it hasn't even popup, or action button in the top right corner (hidden by default). How can achieve this?
My current manifest.json:
{
"manifest_version": 2,
"background": {
"scripts": ["scripts/jquery.min.js", "scripts/background.js"]
},
"name": "Export Entries",
"description": "some descriptions here",
"version": "1.0",
"icons": {
"16": "images/logo.png",
"48": "images/logo.png",
"128": "images/logo.png"
},
"permissions": ["downloads", "tabs", "contextMenus", "http://my-own-domain-accessed-via-ajax-for-creating-some-files-there.com/*"],
"content_scripts": [{
"matches": ["*://allowed-domain1.com/*", "*://allowed-domain2.com/*"],
"css": ["styles/style.css"],
"js": ["scripts/jquery.min.js", "scripts/popup.js", "scripts/background.js"],
"run_at": "document_end"
}],
"web_accessible_resources": [
"images/logo.png"
]
}
As I understand the extension cannot be disabled absolutely, its process will run in background again. But it's not a problem. I just want to not display the context menu item on other websites.
background.js creates the context menu item and handles its click event:
function exportEntries(info, tab) {
if (info['linkUrl'].indexOf('domain1.com/user/') > -1) {
var user = info['linkUrl'].substr('27');
} else {
var user = null; // export all entries from this topic
}
$.ajax({
url: 'http://my-own-domain-which-creates-the-file.eu/exportEntries/create.php',
method: 'POST',
data: {
topic: tab.url,
user: user
}
}).done(function(url) {
forceDownload(url);
});
}
function forceDownload(url) {
var filename = url.replace(/^.*\/|\.[^.]*$/g, '');
chrome.downloads.download({
url: url,
saveAs: true
}, // options array
function(id) {
// callback function
}
);
};
document.addEventListener('DOMContentLoaded', function() {
chrome.contextMenus.create({
'title': 'Export Entries',
'contexts': ['link'],
'onclick': function(info, tab) {
exportEntries(info, tab);
}
});
});
create.php is on my own domain. It just gets the current page's URL and the user's nickname. Then export all entries from the given topic (i.e. page URL) for the given user, creates a file (.txt, .pdf etc.) and sends back url for downloading the file.
popup.html, popup.js, css file and other stuff is not used for now.
Remove all of your content scripts, they're useless, because the chrome.contextMenus API can only be used on the background page.
To limit the context menu entry to certain domains, pecify the documentUrlPatterns key when you create the context menu using the chrome.contextMenus.create:
chrome.contextMenus.create({
'title': 'Export Entries',
'contexts': ['link'],
'onclick': function(info, tab) {
exportEntries(info, tab);
},
'documentUrlPatterns': [
'*://allowed-domain1.com/*',
'*://allowed-domain2.com/*'
]
});
According to the content scripts documentation:
"If you want to inject the code only sometimes, use the permissions field instead, as described in Programmatic injection."
So instead of
"content_scripts": [
{
"matches": [ "http://allowed-domain.com" ]
}
],
use
permissions: [
"tabs", "http://allowed-domain.com"
],

Resources