I have made a little Chrome extension that injects some code in the current page.
This extension has a weird behaviour though, whenever the code is injected, none of the page's Javascript triggers seem to work anymore.
Would one of you have any idea what that happens? On top of fixing the code I'd really like to know why this happens.
Example : on this page : http://www.acti.fr/success-story/ghd/ if the extension injects the picture, I cannot click on either the menu or "continuer la lecture" at the bottom.
Here are the manifest and the actual code :
manifest.json
{
"manifest_version": 2,
"name": "wpi",
"description": "just an other extension",
"version": "1.0",
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["my-style.js"]
}]
}
my-script.js :
function wpkm_check_content(wpkm_text) {
var wpkm_word = wpkm_text.split(" ");
var wpkm_c = wpkm_word[0].localeCompare("Wordpress");
if (wpkm_c == 1)
return (1);
return (0);
}
var wpkm_html = '<div id="wpkm-bloc" style="position:absolute;right:10px;top:10px;z-index:99999">';
wpkm_html += '<img id="wpkm-img" src="https://nathanarnold.files.wordpress.com/2009/02/ssim51.gif">';
wpkm_html += '</div>';
var wpkm_sdomain = document.domain;
var wpkm_request = new XMLHttpRequest();
wpkm_request.open('GET', '/license.txt', true);
wpkm_request.onreadystatechange = function(){
if (wpkm_request.readyState === 4){
if (wpkm_request.status === 200
&& wpkm_check_content(wpkm_request.responseText) == 1) {
document.body.innerHTML += wpkm_html;
}
else {
console.log("Oh no, it does not exist!");
}
}
};
wpkm_request.send();
Any hints will be appreciated :D
You're effectively reassigning the entire innerHTML of the document body by using += append operator which causes reevaluation and recreation of the entire page and of course all previously attached event handlers aren't reattached automatically.
Use insertAdjacentHTML instead:
document.body.insertAdjacentHTML("beforeend", wpkm_html);
Related
I am trying to make a Chrome extension with a content script to inject a script into a webpage before all other scripts in the page. (I am using the xhook library to intercept XHR requests, which overwrites the XHR class. I need to do this because it is currently impossible to modify responses using Chrome extension APIs.) The "document_start" event is executed before any of the DOM is written, so I manually create the body element with the content script. However, this creates 2 body tags in the HTML, which appears to make variables defined within the injected script tag inaccessible to the code in the main page.
How should I do this?
I have simplified version of my code below:
manifest.json
{
// Required
"manifest_version": 2,
"name": "My Extension",
"version": "0.1",
"description": "My Description",
"author": "Me",
"permissions": ["https://example.com/*"],
"content_scripts": [{
"matches": ["https://example.com/*"],
"js": ["xhook.js"],
"run_at": "document_start",
"all_frames": true
}
]
}
xhook.js
var script_tag = document.createElement('script');
script_tag.type = 'text/javascript';
holder = document.createTextNode(`
//Xhook library code
// XHook - v1.4.9 - https://github.com/jpillora/xhook
//...
//Now to use the library
console.log('loading extension');
xhook.after(function (request, response) {
//console.log(request.url);
if (request.url.startsWith("https://example.com/")) {
var urlParams = new URLSearchParams(window.location.search);
fetch('https://example.com/robots.txt')
.then(
function (apiresponse) {
if (apiresponse.status == 200) {
response.text = apiresponse.text();
return;
};
if (apiresponse.status !== 200) {
console.log('File not found. Status Code: ' +
apiresponse.status);
return;
};
});
};
});
xhook.enable();`);
script_tag.appendChild(holder);
document.body = document.createElement("body");
document.head.appendChild(script_tag);
Thanks!
If the extension is loaded at document_start, document.head = null. Hence, to overcome this, do - document.lastChild.appendChild(script_tag);. This creates a script tag in your <html> hierarchy. Hope this helps.
Also, Could you please tell why are you doing the following statement
document.body = document.createElement("body"); I believe this is not required.
My simple Chrome extension is injecting a DIV at the top of document.body, then you can drag text from your page into the extension. The problem is that I want the extension DIV not to be located at top, but instead be something like a side bar to the left.
In other words I need to know how to programatically rearrange already loaded DOM structure so that all content is moved to the right and horizontally compressed and then the left area is accessible to further manipulations.
One option I was considering was to do this:
tmp = document.body.innerHTML
document.body.innerHTML = '<table><tr><td id=sidebar></td><td>'
+ tmp + '</td></tr></table>'
But this will be inneficient, will cause rerender and may have other undesired side effects.
By the way current version of the extension will inject every page "on load", but this is just a temporary solution, the side bar must be displayed when the extension button is clicked. This is not part of this question, I know how to do that. Just to let you know that the sidebar creation could be done at any time when user chooses to click the button. That's why using innerHTML is not a good option.
pageload.js
function allowDrop(ev) {ev.preventDefault()}
function drop(ev) {
ev.preventDefault();
var t = 'text', T = Array.prototype.slice.apply(ev.dataTransfer.types)
if (T.indexOf('text/html') >= 0)
t = "text/html"
console.log('text type:', t)
d1.innerHTML += '<div style="display:inline;border:2px solid #000000;">'+ev.dataTransfer.getData(t)+'</div> '
}
function createDragbar(id) {
var n = document.createElement('div')
// n.style.position = "absolute";
n.setAttribute('id', id)
n.style.border = '1px solid #aaaaaa'
n.style.height = 532
n.style.background = "teal"
n.innerHTML = "Drop your text here "
n.ondrop = drop
n.ondragover = allowDrop
document.body.insertBefore(n, document.body.firstChild)
}
createDragbar('d1')
manifest.json
{
"name": "Yakov's Demo Extension",
"description": "Just a demo",
"version": "0.1",
"permissions": [
"activeTab"
],
"content_scripts": [{
"matches": ["http://*/*", "https://*/*", "file://*/*"],
"js": ["pageload.js"]
}],
"manifest_version": 2
}
What about element.insertAdjacentHTML(position, text)?
https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML
I'm trying to modify img src attribute by getting the url from different page. Thing is i need to find it by inspecting DOM as it's not static data; i will be looking via classes and IDs.
My knowledge of chrome extensions is very limited at the time. Basicly i just started.
Look at the "PSEUDO CODE" part of background.js
manifest.json
{
"manifest_version" : 2 ,
"name": "#####" ,
"version": "1.0" ,
"description": "#####" ,
"browser_action":
{
"name": "#####" ,
"icons": ["icon.png"] ,
"default_icon": "icon.png"
},
"content_scripts": [
{
"js": [ "jquery.min.js", "background.js" ] ,
"matches": [ "http://*.#####.com/encounters/promospp.phtml"] ,
"run_at": "document_end"
}]
}
background.js
var l = document.getElementsByTagName("div");
for (var i = 0; i < l.length; i++)
{
var obj = l[i].parentNode;
if (l[i].getAttribute("class") && l[i].getAttribute("class") == "user_contact")
{
var div = l[i];
var id = div.getAttribute("id").replace("u_", "0");
var profileUrl = "../" + id + "/";
var imgs = div.getElementsByClassName("userpic");
log("found img.userpic : " + imgs.length);
if (imgs && imgs.length > 0)
{
var img = imgs[0];
var alink = document.createElement('a');
img.parentNode.appendChild(alink);
alink.setAttribute("href", profileUrl);
alink.appendChild(img);
// PSEUDO CODE - the unknown
//
// download profileUrl page html
// search for given div element
// pull src attribute value from it
// apply it to img here
}
}
}
So in essence. How to download different page and work with it
Since you are including it already and tagged your question with it, I am going to answer with jQuery, I hope you don't mind. So first I rewrite what code you have in jQuery:
$('div.user_contact').each(function(){
var id = $(this)[0].id.replace('_u','0');
var profileUrl = "../" + id + "/";
var imgs = $(this).find('.userPic');
if(imgs.length > 0){
var alink = $(document.createElement('a'));
$(this).append(alink);
$(alink).attr('href',profileUrl);
$(alink).append(imgs[0]);
//Here is where you get the page and search for the div you want
$.get(profileUrl,function(data){
//Since I don't know the layout of what you are looking for
//I will just put in some placeholder
$(imgs).first().attr('src',$('img.youWant',data).first().attr('src'));
});
// Since $.get is asynchronous, doing it like this might cause problems
// if there is more than one div.user_contact.
// In the case where there are a low number of them and you are fine running
// blocking synchronous code, then you can do it with this instead:
// $.ajax(profileUrl,{async:false,success:function(data){
}
});
You'll also need to include permissions in your manifest for the site you are $.geting from. Something like this:
"permissions":["*://*.badoo.com/*"]
Using BeardFist solution + few fixes final code looks like this:
$('div.user_contact').each(function()
{
var id = $(this)[0].id.replace('u_','0');
log(id);
var profileUrl = "../" + id + "/";
log(profileUrl);
var imgs = $(this).find('.userpic');
if(imgs.length > 0)
{
var alink = $(document.createElement('a'));
$(imgs[0]).parent().append(alink);
$(alink).attr('href',profileUrl);
$(alink).append(imgs[0]);
$.get(profileUrl, function(data)
{
$(imgs[0]).attr('src',$('img.pf_phts_b_pht', data).attr('src'));
});
}
});
It works excelent. Entire html is inside data and it even stays loged and stuff :)
This problem seems to have been sort of resolved, as long as the URL of the page you're injecting your javascript into starts with www. What do you do if it doesn't? Here's the relevant part of my manifest:
"content_scripts": [
{
"run_at": "document_start",
"matches": ["https://groups.google.com/forum/?fromgroups=#!newtopic/opencomments-site-discussions"],
"js": ["postMsg.js"]
}
],
The problem, according to another stackoverflow post, is because the URL of the page doesn't begin with 'www'. Does that mean that you can't inject javascript into secure pages whose URL doesn't begin with 'www', or is there another way? This had never been a problem in the past, because my extension had run with Version 1 manifests.
Forgot to add the content script:
var subject = document.getElementById("p-s-0");
subject.setAttribute("value", "foo");
The element with ID "p-s-0" is the Subject field in the Google Groups Post page, so the field should display "foo".
A few issues:
That is a not valid match pattern because they only specify up to the URL path (the part before the ?).
Change the matches to:
"matches": ["https://groups.google.com/forum/*"],
The overall URL (https://groups.google.com/forum/?fromgroups=#!newtopic/opencomments-site-discussions) is not practical because Google changes the URL parameters willy nilly. For example, fromgroups is not often present, and may not have the = if it is. Additional parameters, like hl=en come and go. (This is the reason why my earlier answer worked for me, but not for you.)
So, using include_globs in the manifest would be a messy, error-prone exercise.
The solution is to checklocation.hash within the content script.
The script is set to "run_at": "document_start", so the content script is running before there is any node with id p-s-0.
Change the manifest to "run_at": "document_end".
The new Google groups is heavily AJAX driven. So, The "New Topic" page is usually "loaded" without actually loading a whole new page. This means the content script will not rerun. It needs to monitor for "new" AJAX-loaded pages.
Check for "new" pages by monitoring the hashchange event.
Additionally, the p-s-0 element is added by AJAX, and is not immediately available on a "new" page. Check for this element within a setInterval.
Putting it all together,
The manifest.json becomes:
{
"manifest_version": 2,
"content_scripts": [ {
"run_at": "document_end",
"js": [ "postMsg.js" ],
"matches": [ "https://groups.google.com/forum/*" ]
} ],
"description": "Fills in subject when posting a new topic in select google groups",
"name": "Google groups, Topic-subject filler",
"version": "1"
}
The content script(postMsg.js) becomes:
fireOnNewTopic (); // Initial run on cold start or full reload.
window.addEventListener ("hashchange", fireOnNewTopic, false);
function fireOnNewTopic () {
/*-- For the pages we want, location.hash will contain values
like: "#!newtopic/{group title}"
*/
if (location.hash) {
var locHashParts = location.hash.split ('/');
if (locHashParts.length > 1 && locHashParts[0] == '#!newtopic') {
var subjectStr = '';
switch (locHashParts[1]) {
case 'opencomments-site-discussions':
subjectStr = 'Site discussion truth';
break;
case 'greasemonkey-users':
subjectStr = 'GM wisdom';
break;
default:
break;
}
if (subjectStr) {
runPayloadCode (subjectStr);
}
}
}
}
function runPayloadCode (subjectStr) {
var targetID = 'p-s-0'
var failsafeCount = 0;
var subjectInpTimer = setInterval ( function() {
var subject = document.getElementById (targetID);
if (subject) {
clearInterval (subjectInpTimer);
subject.setAttribute ("value", subjectStr);
}
else {
failsafeCount++;
//console.log ("failsafeCount: ", failsafeCount);
if (failsafeCount > 300) {
clearInterval (subjectInpTimer);
alert ('Node id ' + targetID + ' not found!');
}
}
},
200
);
}
i looked everywhere trying to find an answer to this question.
i want my extension to either disable all javascript on the page BUT to allow the insertion of a cotent script that will work. (so chrome.contentSettings.javascript is not a valid option for now)
Alternatively i want a way to remove all script tags before any of them fire (which is kinda the same thing)
i tried inserting content scripts to runat:document_start but the dom is not fully there at the time. itried adding a conte t s ript on tabs.onUpdate when state is loading but that is too late and as well as content scripts at document_end (all of which who try to remove script tags) but it is still too late.
in an act of desperation i tried altering the behavior of the getters and setters of element.innerHTML to. remove the tags but that did not work as well
i am trying to avoid sending an xhr request to location.href and parse and re_set the content as that is too intensive.
any ideas?
After seeing your comments I think this might suit your needs. It works by getting the page's source, render it to a DOM, disable all the JS and then put it back into the page. Not exactly what you wanted but should suit your case well...
mainfest.json
{
"name": "Reload and Kill JS - Using a content script",
"version": "1.0",
"permissions": [
"tabs", "<all_urls>" , "storage"
],
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["injectedCode.js"],
"run_at" : "document_start"
}
],
"minimum_chrome_version" : "20",
"manifest_version" : 2
}
background.js
chrome.storage.local.set({"blockhttp://paez.kodingen.com/":true});
injectedCode.js
reloadAndKillJS = function() {
document.documentElement.innerHTML = 'Reloading Page...';
var xhr = new XMLHttpRequest();
xhr.open('GET', window.location.href, true);
xhr.onerror = function() {
document.documentElement.innerHTML = 'Error getting Page';
}
xhr.onload = function() {
var page = document.implementation.createHTMLDocument("");
page.documentElement.innerHTML = this.responseText;
var newPage = document.importNode(page.documentElement,true);
var nodeList = newPage.querySelectorAll('script');
for (var i = 0; i < nodeList.length; ++i) {
var node = nodeList[i];
if (node.src) {
node.setAttribute('original-src', node.src);
node.removeAttribute('src');
}
node.innerText = '';
}
document.replaceChild(newPage, document.documentElement);
delete page;
// Do your thing here
}
xhr.send();
}
chrome.storage.local.get("block"+window.location.href,function(items)
{
if (items["block"+window.location.href]){
window.stop();
reloadAndKillJS();
}
});
Well, the only way to truly prevent scripts is with contentSettings. So you need to put your code somewhere else, in another domain, since contentSettings rules can be applied for specific URL's.
Put you content script to run at document start.
contentScript.js:
window.stop();
document.all[0].innerHTML = "\
<html>\
<body>\
<iframe src=\"chrome-extension://ID/inject.html?url="+encodeURIComponent(location.href)+"\"></iframe>\
</body>\
</html>";
inject.html:
<html>
<head>
<script>
var frame = document.querySelector('iframe');
frame.src = location.search.replace('?url=', '');
frame.onload = function() {
//Your stuff here
}
</script>
</head>
<body>
<iframe></iframe>
</body>
<html>
Now your code is in a parent frame and in another domain, but it may cause some CORS issues which you can try found some workarounds later.
Give a try, then tell me if there's something to fix.