Develop Reference

Chrome Extensions: Use a content script to modify existing scripts on a web page?

I'm creating a chrome extension that needs to hook into another script that already exists on my target web page. For simplicity's sake, I'm trying to find the following existing script element on a page and add a console.log() to it.
<script type="text/javascript">
var viewModel = new ScenePlayViewModel('', 'Ace', false);
viewModel
.load('jgWJJ2qsxx')
.then(function () {
sceneDOM = new SceneEditDOM2(viewModel.scene());
sceneDOM.init();
viewModel.isSubmitViaShareUrl(false);
viewModel.isSubmitViaUnityPackage(false);
console.log("HOOK INJECTED"); <--------------------------------------------- line to add
});
</script>
I've tried a number of solutions but none of them have seemed to work. For example, I've tried using a content script to find the script and replace the text, but it appears to run the pre-change script instead of my modified code.
// replaces javascript on website, but doesn't run new version
var scriptLoadScene = $("script:contains('new ScenePlayViewModel')"); // find the script
scriptLoadScene.text("console.log('Hello World')"); // change the text
What should I do? Basically, I'm just trying to change/add scripts to the web page to add more features.

This doesn't exactly answer your question, but hopefully will help you find a solution.
First - hopefully someone with more knowledge than me will confirm or discredit this - from my understanding, the script code is only run once, on page load, unless otherwise triggered by some event. Since Chrome extensions are triggered after the page has loaded, this script will have already been run, and anything inserted after won't run unless triggered.
I suppose you could always call the function again after you've edited it, but I don't have the knowledge or experience to predict what would happen then.
In my experience, I've just added my own '' tags with the code I wanted to run by writing them into the DOM, either into the '' or '' element.
Best of luck.
-brent

How To Access and Click Button PhantomJS

I am trying to automatically download a plugin on my wordpress site by implementing phantomJs. For some reason, I cannot seem access the download button (shown below)
This is the HTML code to the image (with domain sensitive information blurred out for security purposes)
So far, I have tried accessing this element by using the following code:
function() {
page.evaluate(function() {
let mainLink = document.querySelector('a[data-slug="better-wp-security"]')
mainLink.click()
})
}
Some things to mention:
This function, as it is part of a larger file, will NOT execute until the page has finished loading.
PhantomJS is executing correctly, there are no problems with permissions
The script before-hand is properly accessing the install plugins page, which I verified by capturing screenshots before trying to click.
I have defined click earlier int he file, it works perfectly.
Any ideas how I can accomplish this? Thanks all!
ADDED INFORMATION:
It seems as if the path from the main div element is as follows:
#the-list .plugin-card plugin-card-better-wp-security .plugin-card-top .action-links .plugin-action-buttons .install-now button
I imagine the solution to this question has something to do with this sequence.

I was able to accomplish this by now going after the data-slug attribute, but rather going after the href element itself. Although I can't generate my own wponce value without the use of the Rest API, I was able to search the document to find an href that contained certain parts of the url. This is the final code below:
document.querySelector('a[href*="action=install-plugin&plugin=better-wp-security"]').click()
That's it! Simple and easy!

Automatically jump to a certain part of a WebView

I'm making a Chrome App, and i'm using the web view tag, which is similar to an iframe.
Is there a way to load halfway down the webpage that's inside the web view?
I have tried:
<webview onLoad="window.scroll(0, 150)" class="test" src="http://example.co.uk/test.aspx"></webview>
But it seems that would be far to easy. I'm not convinced its even possible.
Thanks

Assuming for a moment that code would execute (it won't because of the CSP), window would refer to the app's page, not the embedded page.
You need to execute the code in the context of the embedded page.
If you worked with Chrome extensions before, you would know that the part interacting with web content is called a Content Script.
Apps have a similar concept for <webview> elements. You can either declare in advance which pages should get which content script while they load, or you can explicitly load a content script.
So, suppose you have a file content.js with the following contents (excuse the pun):
window.scroll(0, 150);
Also, assume you have a script app.js running inside your app page, and a variable webview is a reference to the <webview> in there.
Then, you can make the webview execute it:
Declaratively, by calling webview.addContentScripts before loading the page (e.g. before setting src from app.js code):
// Assuming <webview id="wv"></webview>
var webview = document.getElementById("wv");
webview.addContentScripts([{
name: "ExampleRule",
matches: ["http://example.co.uk/*"], // can be as narrow as you wish
js: ["content.js"]
}]);
webview.src = "http://example.co.uk/test.aspx";
Explicitly, when the page is already loaded:
// Assuming <webview id="wv" src="http://example.co.uk/test.aspx"></webview>
var webview = document.getElementById("wv");
webview.executeScript({file: "content.js"});
It is, of course, possible to make content.js much more sophisticated (for example, receive commands from the app) and/or more precisely control the timing of your operation - but those are at this point generic content script questions for which you can find solutions elsewhere or ask a new question.

basic javascript alert not working in Intel XDK code editor

I'm starting fresh with a new blank Intel project and I haven't even started coding yet. I'm just setting up my file tree and making sure the html and javascript pages are connected via the right anchors and script paths. My first .js file won't work though.
I've included a screen shot of test code and the errors. I know the syntax is correct because it works when I put it in <script> tags in the index.html file.
I'm getting "document not defined" and "alert not defined" errors or the js page though. I don't know what that means.
I've considered that my script tag src path in the index file is incorrect, but all the paths are relative in the commented out template script tags intel provides on the index page right out of the box, so why would I have to use an absolute path?
My path is: js/Test.js and it's the last script tag before the body.
Index.html file
*****UPDATE****
So I've tried a few things and it's still not working but I HAVE managed to get my errors down to just one inexplicable "missing semicolon", which will turn into an "unnecessary semicolon" error if I place it.
Any way as per the first screen shot you'll see that I wasn't placing the document object inside of an explicitly declared variable. Once I did that and accessed it through dot syntax instead of an equal sign then I stopped getting the error. I included this screenshot to show my work before I made the changes.
so the problem I went on to have is that unless every function or dom object was declared with "Var", I'd get an error. This includes the alert() function which I don't think I've ever seen needing to be declared that way, but I gave the code editor what it wanted and this last screenshot is the results. It's not working, BUT I'm not getting the errors I was before, except for the missing/unnecessary semicolon paradox. Removing it or including it throws an error.

JavaScript can be loaded before or after the HTML, however the way it is done is slightly different depending on how you do it.
For example if you wish to include your JavaScript files within the head of the HTML file then you must wrap your JavaScript code with either DOMContentLoaded or jQuery's $(document).ready().
The common misconception of using window.onload will not fix the issue where the elements have not loaded in correctly.
The Mozilla Developer Network states on this page:
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
That quote in itself should prove that onload should not be relied on if you want the full DOM to be loaded properly before you start manipulating it. Instead you should do the following:
Vanilla
document.addEventListener("DOMContentLoaded", function (e) {
/** DOM has been fully loaded here, so manipulation can begin. **/
/** Your code here. **/
});
jQuery
$(document).ready(function () {
/** DOM has been fully loaded here, so manipulation can begin. **/
/** Your code here. **/
});
Click this link to see the difference between vanilla and jQuery.
The second way you can load JavaScript is by having all the script tags within the body but after all the HTML, that way it is guaranteed to load after the HTML.
Example
Try this working example I quickly coded up.
HTML
Replace the content within the body tag of your HTML to the following:
<button id="myJsTest">Click Me!</button>
<div id="clickCounter">Click Count: 0</div>
Replace the contents of your JavaScript with the following:
JavaScript
document.addEventListener("DOMContentLoaded", function() {
var clickCount = 0;
document.getElementById("myJsTest").addEventListener("click", function() {
clickCount++;
document.getElementById("clickCounter").innerText = "Click Count: " + clickCount;
});
});
Then use the Emulate tab in Intel XDK to test it.
Additional Information
When I use Intel XDK and I have an error, I quickly load the file in to the browser and check the console. It can be a really helpful and effective way of squashing those pesky little bugs.
Try using window.alert as alert is defined in the window object.

The reason you're seeing all those "error" messages in the editor window is because you've got the various JSLint/Hint tools loaded in the editor. They're trying to keep you honest and save you lots of time in the debugger chasing potential syntax errors.
The editor inside the XDK is Brackets, it is using standard Brackets extensions to provide those JSLint/Hint tools. You can download it and run it standalone on your system and edit directly within it, you don't have to use the editor inside the XDK (or you can use any other editor you like).
Because the Lint/Hint tools only look at one file at a time, and because your app is normally spread over multiple files, they don't know much about about what's defined in your other files. Likewise, those hint/lint tools need to be told that you're using some of the standard global methods and properties that are expected to be found in a browser (but which may not be found in other JavaScript environments, because JavaScript is no longer limited to just a browser environment -- in fact, your XDK app, aka Cordova app, runs inside a "webview" not in a browser, but that's another story...)
So, you should follow some standard practice of setting up your JSHint/Lint directives at the top of your JS files. For example, this is a good starting point:
/*jslint browser:true, devel:true, white:true, vars:true */
/*global $:false, intel:false */
See the JSHint documentation for details... and see the "Blank Cordova Starter App" in the "Start a New Project" section of the Projects tab for a better blank template to start (there is no real difference between a blank template and a demo app, they are structured identically).
For a more complete and even more instructive app, see the "Hello, Cordova" sample app. Both of those apps can also be found on the Intel XDK GitHub repo.

You are adding the js file that is <script src="js/Test.js"></script> inside header tag.
So js will be first loaded and and it will attach all events to it. But when js is loaded button id="jsTest" is not present because DOM is not loaded.
Solutions :-You can follow either of the approach
Add your js files after DOM is ready
<body>
<button id ="js/Test.js">Test JS</button>
// other HTML tags
<script src = "js/Test.js></script>
</body>
Use window.onload
The load event fires at the end of the document loading process.
window.onload = testJsFile(){
//Your code goes here
}
I will prefer to use the first approach since that also address other issues like page loading time

Try to put the line outside your JS function
document.getElementById(......
inside your html page between
<script>HERE</script>
If this is still no working. Try to add onClick attribute to the button like this:
<button id="" onClick="testJsFile()">
Its also good to use google chrome element inspection while devlopping cuse it will give you error msg for all these things.

How do I change and run js and css (less) files with ajax (using jquery)

When I click a botton I make an ajax call which loads different html code inside a div with the id 'main'. I have no problems getting the html code to show, but I can't find a way to change/add/include css and js code to my current page.
Or actually, I have found many different ways but non does what I want it to do.
First I tried to send over the link and script tags as strings inside a json object (with my other html code) and inserted them where I wanted them to be.
$('#main').children().remove();
$('#main').append(data.html);
$('body').append(data.js);
$('head').append(data.css);
it seems like this inserts them correctly when I 'inspect elements' and look under the 'sources' tab in the browser (chrome), but they don't execute/run.
Then, I tried to add id attributes to my css and js elements and then change the href and src attributes respectively (I have tried doing this both before and after my ajax call but both inside the click event). This allowed me to take away the css and js which belonged to the previous html code that was inserted in the div which is what I want.
$('#lessAjax').attr('href', 'location/style.less');
$('#jsAjax').attr('src','location/main.js');
and they are also included when I 'inspect elements' and look under the 'sources' tab in the browser (chrome), but obviously they don't execute/run either since this is pretty much the same thing as I did in the first example (only that now the code which is not used in my new view is taken away).
I then thought I had found a solution to the js file after finding the $.getScript() method since it executed my script which is directly under $(document).ready(function(){....}, but I noticed that the file cannot be found anywhere when I 'inspect elements' or when look under the 'sources' tab in the browser (chrome) so there is no way to take away or debug the code.
I have also tried
$('<link href="location/style.less" type="text/css" rel="stylesheet/less">')
.appendTo("head");
which includes the file but doesn't execute/run/work either.
I don't want to just include css and js code within script and style tags. I want to be able to switch css and js files as I change html code inside this div with Ajax (jQuery).
I have tried many more things in the 5 hours I spent trying to do this but I can't remember them all now. Surely this must be a common thing to do? Or are there any reasons for why I really shouldn't do this?
Any help would be much appreciated.

jqueryMobile: How to load external Javascripts
Can I load external stylesheets on request?
However please consider using a templating engine for content like this. There are many out there like underscoreJS and even frameworks that support them like Knockout, AngularJS and Backbone.
$("#somebutton").click(function(){
var path = 'path to css';
$.ajax({
url: path,
type:'HEAD',
error: function()
{
alert("failure")
},
success: function(result)
{
alert("success")
}
});
})