I'm currently writing an extension which injects a Content Script. This script parses data from the page, saves it in the localStorage and is able to find the link to the next page and reload via location.href = "newUrl". On this page the script should run again, parse the data, save it, go to the next page etc.
Currently I can't find a solution which lets me do the last part (go to new page, run the script again, go to next page). I can't find a way to do something like "on page loaded execute the parsing function and then execute the goToNextPage function".
Any clues would be highly appreciated!
(Added from comments)
My background.js includes the following:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript(tab.id, {file: "jquery-2.1.3.min.js"}, function () {
chrome.tabs.executeScript(tab.id, {file: "content.js"});
});
});
And content.js includes some functions to read the "next" link, parse the current page, etc.
I would do differently with regards to how you switch pages.
I would message the background with the next URL, and let background update the page and re-inject stuff. This way it will be synchronized with navigation.
// Content script
chrome.runtime.sendMessage({action: "updateMe", url: nextUrl});
// Background
function injectScripts(tab) {
chrome.tabs.executeScript(tab.id, {file: "jquery-2.1.3.min.js"},
function () { chrome.tabs.executeScript(tab.id, {file: "content.js"}); }
);
}
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if(message.action == "updateMe") {
chrome.tabs.update(sender.tab.id, {url: message.url}, injectScripts);
}
});
// You can use the same handler in onClicked
chrome.browserAction.onClicked.addListener(injectScripts);
Related
Because my content script cannot use all the chrome API tools, I am sending a message from my content script to my background script. When received, the background script is supposed to open a new tab containing an html file I had made.
This is sending the message from the content script...
chrome.runtime.sendMessage({permission: true}, function(response) {
console.log(response.access);
});
This is the code to receive the message in my background script...
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.permission == true) {
chrome.tabs.create({'url': chrome.extension.getURL('./src/permission.html')}, function(tab) {
sendResponse({access: "yes"});
});
}
});
The message is received, I have already tested that. But when I add the following code...
chrome.tabs.create({'url': chrome.extension.getURL('./src/permission.html')}, function(tab) {
...etc
I get an error saying response not received. Meaning something must have broke inside my chrome.tabs.create. Why is it breaking?
The permission.html path is relative to the background script.
What I want is for a new tab to be created when the message is received.
I'm not sure if this has any affect, but the content scripts and the background scripts communicate asyncronously so for you to use the sendResponse callback, you'll need to return true; at the end of your onMessage anonymous function.
Chrome onMessage return true
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.permission == true) {
chrome.tabs.create({'url': chrome.extension.getURL('./src/permission.html')}, function(tab) {
sendResponse({access: "yes"});
});
}
return true; //to tell the content script to look out for sendResponse
});
Again, I'm not sure if this will solve your problem, but regardless, your response using sendResponse will not work without returning true at the end of the listener
Also, BTW, chome.extension.getURL() does not need a dot-slash so chrome.extension.getURL('src/permission.html') should be enough.
Have you tried just running
chrome.tabs.create({'url': chrome.extension.getURL('src/permission.html')});
(with or without the dot-slash) to see if the tab opens up?
I would like to get elements from chrome tab with a certain URL, it does not have to be active. so far I have:
Test()
function Test() {
chrome.tabs.query({url: "https://www.somewebsite.com/*"}, function(results) {
chrome.tabs.executeScript(results[0].id,{code: 'El = document.getElementsByClassName("someclass")'});
console.log(El);
})
}
Maybe it has to be done through a content script file?
I have this code placed in my background.js file. Given the proper URL and Class this function will not return the Element. Why?
Thanks for any suggestions!
The background script is executed only once when chrome launches. Instead of writing this inside a function which you call in the same file, you have to put it in some kind of event listener. This code should stay in the background file, but has to be triggered by something, not just executed on extension load.
EDIT: Oh, I see, you're trying to pass the element to the background script. You can't.
Background scripts have access to the whole chrome APIs but not to the page content. The script you write in executeScript runs on the tab you specified, so the variables are available to other code within that tab, not within your background script. Extension code that can run on the page and edit its content is either sent using executeScript or put in content scripts.
If you want to share information between various layers of an extension, you need to use messages. They work like events and listeners. Read the docs here. You'll be able to pass data like numbers and strings, but not the actual HTMLElement. So any code that manipulates the DOM has to run on the tab itself.
If your code is small and simple, you could just write it in the executeScript call instead.
You are correct, there does not appear to be a way to manipulate elements in another tab from the background.js;
Test();
function Test() {
chrome.tabs.query({
url: "https://www.google.com/*"
}, function(results) {
if (results.length < 1) { //if there is no tab open with google.com
console.log("Tab not found, creating new tab");
chrome.tabs.create({
"url": "https://www.google.com/",
"selected": true
}, null);
chrome.tabs.query({
url: "https://www.google.com/*"
}, function(results) {
if (results.length >= 1) {
console.log("Found google.com in the new tab");
}
chrome.tabs.executeScript(results[0].id, {
code: "foo = document.getElementsByTagName('input'); console.log(foo,' This is sent from the active tab');
chrome.storage.local.set({
'foo': foo[0]
});
"},function(foo) {chrome.storage.local.get("
foo ", function(foo) {console.log(foo , 'This has retrieved foo right after saving it to storage.');});});
});
}
});
}
search()
function search(result) {
chrome.storage.local.get("foo", function(result) {
console.log(result, 'This has retrieved foo from storage in a separate function within background.js');});
}
the first console log will show the html collection object for the inputs from google.com inside the google.com tab console, the other two will show blank objects in the background.js console. Thanks, I will find another solution.
So, I am trying to do something like parental control. When I start my extension for the first time it works fine, but when I use it again elements don't hide, whole page loads and then it redirects, I want to hide all elements on page and then redirect, I am not using onBeforeRequest I want to use it with google search too and I don't know if I can put regex inside urls option. My manifest is ok, I start content script at "document_start".
background.js
var activeTabUrl;
var regex = /http:\/\/www.youporn.com\//
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
chrome.tabs.query({
active: true,
currentWindow: true
}, function (arrayOfTabs) {
activeTabUrl = arrayOfTabs[0].url;
});
if (activeTabUrl.match(regex)) {
chrome.tabs.update({
url: "http://google.com/"
})
} else {
chrome.tabs.sendMessage(tabId, {
action: "show_my_page"
}, function (response) {});
}
});
myscript.js (content_script)
_ini();
function _ini() {
document.getElementsByTagName("html")[0].style.display = "none";
chrome.extension.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action == 'show_my_page') {
document.getElementsByTagName("html")[0].style.display = "block";
}
});
}
That's a wrong approach, but first why it fails.
If you're executing at document_start, then the only node existing in the dom would be the document node. Not even html yet.
Yes, you could potentially wait for html node to appear, but this is very roundabout. Your goal is to prevent navigation in the first place - and for blocker-style functionality there's the webrequest API (which, IIRC, was specifically implemented for AdBlock).
Here's a minimal sample from the docs themselves:
chrome.webRequest.onBeforeRequest.addListener(
function(details) { return {cancel: true}; },
{urls: ["*://www.evil.com/*"]},
["blocking"]);
You can also redirect that with a redirectUrl instead of cancel in the blocking response. See also CatBlock for a complete sample.
I would like to use a Chrome Extension to download the current page's DOM. I'm not sure why, but when my download occurs, the result is just a text file with either 'null' or 'undefined', rather than the DOM. I've tried to assimilate the knowledge from here and here, but I can't seem to get the message from content.js through to popup.js.
Additionally, I'm not sure why this actually works. When I read the docs, it seems like I need to send the message from popup.js to content.js by selecting the active tab:
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {message: 'getMessageFromContent'}, function(response) {
//Code to handle response from content.js
}
});
My current code:
content.js
var page_html = DOMtoString(document);
chrome.runtime.sendMessage({method: 'downloadPageDOM', pageDOM: thisPage});
function DOMtoString(document_root) { ... }
background.js
chrome.tabs.query({currentWindow: true, active: true}, function(tab) {
var page_html;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.message == 'downloadPageDOM')
page_html = request.pageDOM;
else if (request.message == 'getPageDOM')
sendResponse(page_html);
});
});
popup.js
document.addEventListener('DOMContentLoaded', function() {
var download_button = document.getElementById('download_button');
download_button.addEventListener('click', function() {
chrome.runtime.sendMessage({message:'getPageDOM'}, function(response) {
download(response, "download.html", "text/html");
});
});
});
function download(data, fileName, mimeType) { ... }
I feel like I'm missing a crucial understanding of how message passing works. If anyone could take a second to help me understand why the file that downloads just has 'null', I would sincerely appreciate it.
You're over-complicating this, which leads to a lot of logical errors.
You've set up the background page to act like a message proxy, and the content script itself triggers updating your page_html variable. Then the popup pulls that data with another message.
Note that page_html will not contain the current tab's data in any case: you're overwriting this data with the last loaded tab.
What you can do is completely cut out the middleman (i.e. background.js). I guess you got confused by the fact that sending a message TO a popup is a generally a bad idea (no guarantee it's open), but the other way around is usually safe (and you can make it always safe).
Solution 1 (bad, but here for educational purposes)
The logic of your app is: once the user clicks the button, make the snapshot at that moment. So, instead of making your content script do its work immediately, add a message listener:
// content.js
chrome.runtime.onMessage(function(message, sender, sendResponse) {
else if (request.message == 'getPageDOM')
sendResponse(DOMtoString(document));
});
function DOMtoString(document_root) { ... }
And in your popup, request it:
// popup.js
// (Inside the click listener)
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
// Note that sending a message to a content script is different
chrome.tabs.sendMessage(tabs[0].id, {message:'getPageDOM'}, function(response) {
download(response, "download.html", "text/html");
});
});
However, this solution is not 100% robust. It will fail if the content script is not injected into the page (and this can happen). But it's possible to fix this.
Solution 2
Let's not assume the content script is injected. In fact, most of the time you don't NEED to inject it automatically, only when the user clicks your button.
So, remove the content script from the manifest, make sure you have host permissions ("<all_urls>" works well, though consider activeTab permission), and the use programmatic injection.
There is a little-used form of programmatic injection that collects the value of the last executed statement. We're going to use that.
// content.js
DOMtoString(document); // This will be the last executed statement
function DOMtoString(document_root) { ... }
In the popup, execute script, collect results:
// popup.js
// (Inside the click listener)
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "content.js"}, function(data) {
// Data is an array of values, in case it was executed in multiple tabs/frames
download(data[0], "download.html", "text/html");
});
});
NOTE: All of the above assumes that your function DOMtoString actually works.
I have by default an External JS called alerton that will run on anywebppage when the extension is enabled.
I've also set up a Popup/Menu for when you click the Chrome Extension Icon at the top right.
I want to when the user presses the button "off" to Turn off/Remove an external javascript file called "alerton"
After many many hours, I'm at a loss as to what I need to do to get this to work!
I've looked at chrome.contentSettings.javascript However it doesn't seem like I can disable just one particular Javascript file.
I'm hoping someone has an answer...
One way you could achieve this is by reading and modifying a boolean variable in a Background Page and use Message Passing to communicate to and from your content-script and popup page. You can define a Background Page in your Manifest as such:
....
"background": {
"scripts": ["background.js"]
},
....
The background.js would look something like this:
var isExtensionOn = true;
chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.cmd == "setOnOffState") {
isExtensionOn = request.data.value;
}
if (request.cmd == "getOnOffState") {
sendResponse(isExtensionOn);
}
});
From your PopUp.html and your content-script you could then call the background.js to read and set the isExtensionOn variable.
//SET VARIABLE
var isExtensionOn = false;
chrome.extension.sendMessage({ cmd: "setOnOffState", data: { value: isExtensionOn } });
//GET VARIABLE
chrome.extension.sendMessage({ cmd: "isAutoFeedMode" }, function (response) {
if (response == true) {
//Run the rest of your content-script in here..
}
});