I have a chrome plugin that uses a content_scripts manifest section to have a javascript file loaded every time a user visits some page.
"content_scripts": [{
"css": ["styles.css"],
"js": ["content.js"],
"matches": ["https://www.coolsite.com/*"]
}]
Inside the content.js I am making an HTTP call and in a result I receive an html page. I would like to parse that loaded html page with document.querySelector(), but this page is only available as a string. What's the best way to parse it?
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (ev) {
if (xhr.readyState === 4) {
// parse xhr.responseText as DOM???
}
};
xhr.open("GET", "https://www.coolsite.com/store/" + shopName);
xhr.send();
Related
I want to listen to all the requests going from a page(including from the iframes that it might have) and get metrics similar to resource timing api for all of the requests. I want to be able to do this from a background script.
I tried injecting a script tag directly which will listen to dom change events and then use that data. but see 2 problem there
1. it doesn't get all the dom change events of iframes.
2. I'm unable to locate the additional calls that are made from the iframes.
{
"manifest_version": 2,
"name": "somwnamw",
"version": "1.0",
"author": "Me",
"description": "Some desc",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.mydomain.com/*"],
"js": ["trackIt.js"],
"run_at": "document_start"
}
],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"webRequest",
"<all_urls>"
],
"web_accessible_resources": ["pa.js"]
}
My content script has something like this
s.addEventListener('load', function(w) {
});
(document.body || document.documentElement).appendChild(s);
And the script I'm injecting into the dom looks like this
var observeDOM = (function(){
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
eventListenerSupported = window.addEventListener;
return function(obj, callback){
if( MutationObserver ){
// define a new observer
var obs = new MutationObserver(function(mutations, observer){
if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
callback();
});
// have the observer observe foo for changes in children
obs.observe( obj, { childList:true, subtree:true });
}
else if( eventListenerSupported ){
obj.addEventListener('DOMNodeInserted', callback, false);
obj.addEventListener('DOMNodeRemoved', callback, false);
obj.addEventListener('DOMAttrModified', callback, false);
obj.addEventListener('DOMElementNameChanged', callback, false);
obj.addEventListener('DOMNodeInsertedIntoDocument', callback, false);
obj.addEventListener('DOMNodeRemovedFromDocument', callback, false);
obj.addEventListener('DOMSubtreeModified', callback, false);
}
};
})();
// Observe a specific DOM element:
observeDOM( document.documentElement,function(data){
let performanceData = performance.getEntries();
console.log(performanceData);
aggregateDataForFPTI(performanceData.slice(perfDataLength, performanceData.length));
perfDataLength = performanceData.length;
});
But my above code doesn't detect dom changes and I'm also unable to get the calls made from the iframes. I do see those requests in chrome developer tools though. here my iframes are from the same domain.
So I want to instead switch to background script and then listen to all the calls happening from the page and get the resource's timings.
Porting extension from Chrome into FF
Followed this tutorial (which works fine in Chrome): http://www.codingscripts.com/check-whether-user-has-a-chrome-extension-installed/
Sending message from webpage to extension:
In (web)pagescript.js this has:
function IsExist(extensionId,callback){
chrome.runtime.sendMessage(extensionId, { message: "installed" },
function (reply) {
if (reply) {
callback(true);
}else{
callback(false);
}
});
}
IsExist("Your extension id",function(installed){
if(!installed){
alert("Please install extension ");
}
});
Receiving message from webpage in extension:
chrome.runtime.onMessageExternal.addListener(
function(req, sender, callback) {
if (req) {
if (req.message) {
if (req.message == "installed") {
callback(true);
}
}
}
return true;
});
What I'm trying to achieve
A couple of html pages on my website need to redirect back to the homepage when the extension is NOT installed. So those pages need to be able to figure out (on their own) if the extension is installed or not.
Error I'm getting when I open webpage
ReferenceError : chrome is not defined. (I also tried with browser.runtime.onMessageExternal but then it throws "browser" is not defined).
Is there no way to do this similar to what can be done in Chrome ?
Thanks to all the comments this is what I came up with. (I had to go for document_end (altho comments advise document_start) cause I had other things going on in content_script.js
In my add-on's content_script.js
document.body.classList.add("plugininstalledblabla");
In my add-on's manifest.json
"content_scripts":
[
{
"matches": ["*://*/*"],
"all_frames": true,
"js": ["content_script.js"],
"run_at": "document_end"
}
]
in my website's main.js script
$(window).on("load", function() { // !! Window onLoad cause : document_end -> DOM should be loaded here
// Set
$body = $('body');
if(document.body.classList.contains("plugininstalledblabla")){
console.log('addon is installed');
}
});
I'm getting the last visited url instead of the current one. (when i go to site.com and after that to site2.com, the url I get is 'site.com' and after I refresh site2.com I'm getting the right one.
Based on the answers here:
Google Chrome Extension get page information
Display current URL in a chrome extension
I've come up with this code:
manifest.json
{
"manifest_version": 2,
"browser_action": {
"default_popup": "action.html"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"unlimitedStorage",
]
}
content.js
chrome.extension.sendRequest({method: "getUrl"}, function(response) {
console.log(response.data);
});
background.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if(request.method == "getUrl") {
chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
currentUrl = tabs[0].url;
});
sendResponse({data: currentUrl});
}
else
sendResponse({}); // snub them.
});
I've also tried to put this code below directly in content.js and I'm getting an error and in background.js and the url is set to chrome://extensions/.
chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
currentUrl = tabs[0].url;
});
what is the right way to do this ?
First of all:
chrome.extension.sendRequest/onRequest are deprecated. Please, use chrome.runtime.sendMessage/onMessage instead.
Also, whenever possible, prefer event pages over background pages. Most of the time it takes next to nothing to convert a background page to an event page, but can save consideably on resources.
The problem:
chrome.tabs.query is asynchronous. It means that, when called, it initializes the request and then completes its execution so the next part of your script gets executed. Once the request has completed, the registered callback function is executed. So, this is what happens in your case:
You visit http://www.site1.com.
chrome.tabs.query({...}, callback) gets executed (notice the callback has not been executed yet).
sendResponse({data: currentUrl}) gets executed (note that at this point currentUrl is not defined).
chrome.tabs.query's request completes and the callback function is executed, setting currentUrl = "http://www.site1.com" (but only after it is too late).
You visit http://www.site2.com.
chrome.tabs.query({...}, callback) gets executed (notice the callback has not been executed yet).
sendResponse({data: currentUrl}) gets executed (note that at this point currentUrl still equals http://www.site1.com from step 4).
chrome.tabs.query's request completes and the callback function is executed, setting currentUrl = "http://www.site2.com" (again only after it is too late).
The solutions:
(A)
Move the logic inside the callback.
(Note: Whenever the callback (i.e. sendResponse) is going be called asynchronously, it is necessary for the onMessage listener to return true.)
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.method && (request.method == "getURL")) {
if (sendResponse) {
chrome.tabs.query({
currentWindow: true,
active: true
}, function(tabs) {
if (tabs.length > 0) {
sendResponse({ data: tabs[0].url });
}
});
/* Since 'sendResponse' is to going be called
* asynchronously, it is necessary to return 'true' */
return true;
}
} else {
// Do not talk to strangers !!!
}
});
(B)
Even simpler in your case, the sender parameter of the onMessage listener, contains the field tab which contains the URL info. E.g.:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.method && (request.method == "getURL") && sendResponse) {
sendResponse({ data: sender.tab.url });
}
});
(C)
If you only need the URL in the context of the content script, why don't you use location.href from within the content script ?
I want to create a Chrome extension with a browser action onClicked which provides the same functionality as the following bookmark:
javascript:(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='http://page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();
However, I struggle to correctly translate the javascript code of the bookmark into the logic of a Chrome extension. I thought the best to is to to put the exact code of the bookmark into a separate script create_feed_url.js and execute it in background.js. My background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
// Run the bookmark code
chrome.tabs.executeScript(null, {file: "create_feed_url.js"});
// Open a new tab for a valid url resulting from create_feed_url.js
var feed_url = "http://page2rss.com/page?url=" + tab.url;
chrome.tabs.create({"url": feed_url});
Yet the code in create_feed_url.js somewhat runs not sucessfully. There is no feed URL generated, resulting in a non existing value for feed_url.
My questions:
Could you please help me to find out why I cannot just put the code of the bookmark into create_feed_url.js and run it?
Is this approach of executeScript recommendable in my case or is there a better way translating a bookmark into an extension?
I solved it with a workaround calling the URL that generates the new feed in a new tab before closing it and finally jumping to the tab with the final RSS feed URL. This solution does not require create_feed_url.js but relies completely on background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
// Original bookmark JS code
//(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='http://page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();
var create_feed_url = "http://page2rss.com/api/page?url=" + encodeURIComponent(tab.url); //+ "&callback=page2rss_bookmark_urlr"
var feed_url = "http://page2rss.com/page?url=" + tab.url;
chrome.tabs.create({"url": create_feed_url, active: false}, function(tab) {
chrome.browserAction.setBadgeText({text: 'wait'});
setTimeout(function() {
chrome.tabs.remove(tab.id, function(tab) {
chrome.browserAction.setBadgeText({text: ''});
});
}, 5000);
});
setTimeout(function() {
chrome.tabs.create({"url": feed_url, active: true}, function(tab) {
chrome.tabs.onUpdated.addListener(function( tabId , info ) {
if ( info.status == "complete" ) {
chrome.browserAction.setBadgeText({text: 'done', tabId: tabId});
}
});
}); }
, 1000);
});
Based on Rob's comment above of using a content script approach I tried to implement it. However, clicking on the browser icon does not trigger the content script create_feed_url.js through content_script.js. I tried to debug the code but neither the Developer Tools nor the inspect element tool show any error.
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "content_script.js"});
});
content_script.js:
var s = document.createElement('script');
s.src = chrome.extension.getURL("create_feed_url.js");
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
create_feed_url.js:
(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='//page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();
manifest.json:
{
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"background" : {
"scripts": ["background.js"],
"persistent": false
},
"web_accessible_resources": ["create_feed_url.js"],
"browser_action" :
{
"default_icon" : "rss-19.png",
"default_title" : "Create RSS feed for this page"
},
"manifest_version": 2
}
The idea is simple. Open a window and then call chrome.tabs.executeScript on that new window.
Unfortunately, it doesn't do anything besides open a new window.
function openc(url) {
window.open(url);
chrome.tabs.executeScript(null, {file: "removeContent.js"});
console.log("hi");
}
document.addEventListener('DOMContentLoaded', function () {
openc("http://www.asdf.com/");
});
First of all, make sure that you've got the host permissions to operate on the page.
If you always want to run the script on the specific page, it suffices to use only content scripts, by registration via the manifest file:
"content_scripts": [
{
"matches": ["http://example.com/*"],
"js": ["open-asdf.js"]
},
{
"matches": ["http://www.asdf.com/*"],
"js": ["removeContent.js"]
}
],
If you want to dynamically execute a content script for the new page, you should use the chrome.tabs.create method to open the new tab, and insert the script in the callback. These methods can only be used in the extension's process, so make sure that the code is running on the background/event/popup/options/.. page.
chrome.tabs.create({
url: 'http://www.asdf.com/'
}, function(tab) {
chrome.tabs.executeScript(tab.id, {file: "removeContent.js"}, function() {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
}
});
});