In my content script, I am using this approach to be able to access web page's variables:
function exec(fn) {
var script = document.createElement('script');
script.setAttribute("type", "application/javascript");
script.textContent = '(' + fn + ')();';
document.body.appendChild(script); //run the script
document.body.removeChild(script); //clean up
}
exec( function(){
var test = websiteVar
chrome.runtime.sendMessage("extensionID", {test: test}, function(response) {
});
});
Where it says extensionID, if I hardcode it, it works. However, I can't use chrome.runtime.id as it is injected in the page. I think I read they don't work in the same context.
Is there a way to get the extension id programatically?
Example of what wOxxOm said above:
function exec(fn) {
var script = document.createElement('script');
script.setAttribute("type", "application/javascript");
script.textContent = '(' + fn + ')("' + chrome.runtime.id +'")';
document.body.appendChild(script); //run the script
document.body.removeChild(script); //clean up
}
exec( function(extensionID){
var test = websiteVar;
chrome.runtime.sendMessage(extensionID, {test: test}, function(response) {
});
});
Related
I am trying to inject a script on page load in head wherein I have to give the page name inside script.
Below is how I am implementing it in my ts file.
**var head = document.getElementsByTagName('head')[0];
var tag = document.createElement("script");
tag.type = 'text/javascript';
tag.innerHTML = "var DDO = {} DDO.pageData = {'pageName': " + pageUrl + "} ";
head.appendChild(tag);**
The script is getting injected however an error is being thrown in the console tab.
ERROR: VM3741:1 Uncaught SyntaxError: Unexpected identifier at appendChild
Try this
var head = document.getElementsByTagName('head')[0],pageUrl="somevalue";
var tag = document.createElement("script");
tag.type = 'text/javascript';
tag.textContent = "var DDO = {}; DDO.pageData = {'pageName': '" + pageUrl + "'} ";
head.appendChild(tag);
To remove previous script element
var script = head.childNodes[0]; //get previous script element
head.removeChild(script); //removing script
you have not provided single quotes for the value of the key pageName
tag.innerHTML = "var DDO = {}; DDO.pageData = {'pageName': " + pageUrl + "} ";
semicolon missing after defining the variable DDO,
and also from where are you injecting in pageUrl, make sure variable is defined.
try having script in external file and injecting in script tag with refrence to that file in case some error in script defined in inner html
document.head, document.body to attach scripts
Correct Answer:
var head = document.getElementsByTagName('head')[0];
var tag = document.createElement('script');
tag.type = 'text/javascript';
tag.id = 'adobedatalayer';
tag.textContent = 'var DDO = {}; DDO.pageData =' + JSON.stringify(pageinfo);
var script = document.getElementById('adobedatalayer');
if (script != null) {
head.removeChild(script);
}
head.appendChild(tag);
I created a script that add javascript files by appending it to the head tag.
Using the code below that I created:
var Dim = (function(s){
var storage;
function loadError (oError) {
throw new URIError("The script " + oError.target.src + " is not accessible.");
}
return {
require : function(script,callback){
var oScript = document.createElement("script");
oScript.type = "text\/javascript";
oScript.onerror = loadError;
if (callback) {
oScript.onload = callback;
}
document.head.appendChild(oScript);
oScript.src = script;
}
};
})();
When we use the script like this:
Dim.require("script.js", function(){alert(token)}); alert(token);
and script.js code is:
alert(" Ok"); var token = " Hello";
The alert(token) throws an error.
Can anyone point me the Problem?
[Question was edited]
Dim.require("script.js", function(){alert(token)}); alert(token);
It runs first alert because its in callback which is called when the script is loaded by the browser.
if (callback) {
oScript.onload = callback;
}
And second is not giving you an alert because it gives you an error
Uncaught ReferenceError: token is not defined
You are loading your script.js asynchronously and while executing second alert , the script.js not loaded yet.
I have my UI's split up in 2 javascript files. If the URL is of certain patter lets say /test1 then I want script1 to execute or in other words, I want script1 to be added as <include> so the UI renders according to script1 else I want script2 to be added for /test2.
There is no button that triggers these URLs. Its when the page loads -detect URL and load script accordingly.
How can I achieve this?
you can dynamically insert javascript file.
<script type="application/javascript">
function loadJS(file) {
// DOM: Create the script element
var jsElm = document.createElement("script");
// set the type attribute
jsElm.type = "application/javascript";
// make the script element load file
jsElm.src = file;
// finally insert the element to the body element in order to load the script
document.body.appendChild(jsElm);
}
if(type === "test1")
loadJS('file1.js')
else
loadJS('file2.js');
</script>
using jquery and javascript:
$(document).ready(function(){
var url=location.href//get the page url
var scriptUrl
if(url.indexOf('something')>0){//check for specific string in url
scriptUrl='/script1.js'
}
else{
scriptUrl='/script2.js'
}
var script = document.createElement( 'script' );//create script element
script.type = 'text/javascript';
script.src = scriptUrl;
$("head").append( script );//append newly created script element to head
})
Query String Examples:
?page=test1
?page=test2
Following code will check the value of page and then load the appropriate Script:
$(document).ready(function () {
var page = $.getUrlVar("page");
var scriptToRun = null;
switch (page) {
case "test1":
scriptToRun = "script1.js";
break;
case "test2":
scriptToRun = "script2.js";
break;
}
// Create Script Tag
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = scriptToRun;
$("head").append(script);
});
Be sure to add the following Extension before your $(document).ready code:
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
(This jQuery Extension is not my Code).
//this function is the callback, it needs to be a global variable
window.readResponse = function (response){
document.getElementsByTagName('SPAN')[0].innerHTML = response;
}
(function(){
//note the "readResponse" at the end
$URL = "http://www.google.com/"
var src = 'http://cdn.api.twitter.com/1/urls/count.json?url=' + $URL + '&callback=readResponse',
script = document.createElement('SCRIPT');
script.src = src;
document.body.appendChild(script);
})();
That above is my codes to get the shares count. But when I do the request, the response I am getting is
function (){ //note the "readResponse" at the end $URL = "http://www.google.com/" var src = 'http://cdn.api.twitter.com/1/urls/count.json?url=' + $URL + '&callback=readResponse', script = document.createElement('SCRIPT'); script.src = src; document.body.appendChild(script); }
Where as I am expecting the response.count is the actual share count.
I setup a demo here http://jsfiddle.net/zs1dgs45/5/
Any help would be appreciated
Twitter have stopped supporting the share count API. Sorry.
I'm starting to use JSDOM and I have this working properly:
jsdom.env(
'<p><a class="the-link" href="https://github.com/tmpvar/jsdom">jsdom\'s Homepage</a></p>',
["http://127.0.0.1:8080/js/test.js"],
function (errors, window) {
//console.log("contents of a.the-link:", window.$("a.the-link").text());
console.log(errors);
console.log(window.myVar);
console.log(window.test);
});
Test.js script is very simple:
console.log("testing testing testing");
window.myVar = "myVar Content";
var test = "test content";
The content of myVar and test is displayed when I execute the script.
But the problem is when I start to do it on the hardcore way (hardcore as the documentation say):
I do the follow:
var jsdom = require("jsdom").jsdom;
var document = jsdom("<html><head></head><body>hello world</body></html>");
var window = document.parentWindow;
var script = document.createElement("SCRIPT");
script.src = "http://127.0.0.1:8080/js/test.js";
var head= window.document.getElementsByTagName('head')[0];
head.appendChild(script);
var window = document.parentWindow;
console.log("myVar Content: " + window.myVar);
In this case, window.myVar is undefined.
What am I missing?
Thanks.
I found how to do it:
var jsdom = require("jsdom").jsdom;
var document = jsdom("<html><head></head><body>hello world</body></html>");
var window = document.parentWindow;
var script = document.createElement("script");
script.type = "text/javascript";
var fs = require("fs");
var requireJSFile = fs.readFileSync("test.js","utf8");
script.innerHTML = requireJSFile;
var head= window.document.getElementsByTagName('head')[0];
head.appendChild(script);
var window = document.parentWindow;
console.log(document.innerHTML);
console.log("myVar Content: " + window.myVar);
I will add a function in the var and I will see if I can use it as: window.myVar(param1, param2, param3).
I'm pretty sure it will work.