We Keep Coding

Chrome edit 3rd party script [duplicate]

I would like to override a javascript file with my own version of the similar javascript file in chrome.
Let me explain:
Lets say a site 'http://example.com' calls 'http://example.com/script/somescript.js'.
What I would like to do is override the file 'http://example.com/script/somescript.js' with my own version located at 'http://localhost/script/somescript.js'.
I need to effectively modify a function in the original Javascript file.

With Chrome 65 this has become trivial.
Using local overrides – Chrome 65
What is it?
It is a new feature that allows us to override a websites code/css with a local copy that is persisted across sessions. Once you override a file it shall remain until you remove the override.
How to set it up?
Open the Sources panel.
Open the Overrides tab.
Open overrides tab
Click Setup Overrides.
Select which directory you want to save your changes to.
At the top of your viewport, click Allow to give DevTools read and write access to the directory.
Make your changes.
After you add a folder you can switch to the network tab and right click on any file and select “Save for overrides”. I have already overridden scripts.js so it shows with a “blue dot”.

There are plugins and tools in Chrome for these purposes:
Chrome's DevTools, tab Local Overrides (supported from Chrome 65)
Requestly
Resource Override
You might also want to use Tamper, which is a mitmproxy based devtools extension that lets you edit remote files locally and serve them directly to Chrome. (but it's more headache to install and use it)
Choose the one which is easier to use for you.

You can create a chrome extension yourself. It is surprisingly easy and takes only a few minutes if you use a tool like yeoman chrome extension. Create a new directory and run the generator
yo chrome-extension
Enter a name for your extension and a short description. Select Page Action and that you want to use Content Scripts. You can ignore other options - follow this excellent guide if you come in doubt, but it is really straight forward.
? What would you like to call this extension? insert-script
? How would you like to describe this extension? replace a function with another function
? Would you like to use UI Action? Page Action
? Would you like more UI Features? Content Scripts
? Would you like to set permissions?
..etc. Now you have a directory structure like this
app
bower_components
images
_locales
scripts.babel
background.js
chromereload.js
contentscript.js
You cannot replace an existing loaded remote script with another script, since the script already is loaded into the DOM. But you can insert a new script at the end of body which overrides the function you want to replace. Functions is variables, if you add a new function to the document with the same name as an existing function, the new function will be executed instead of the old, exactly as if you declared a new variable with the same name as an existing variable. Now open and edit contentscript.js :
'use strict';
console.log('\'Allo \'Allo! Content script');
The code could look like this
'use strict';
var code = `
function foo() {
alert('foo');
}
`;
var script = document.createElement('script');
script.textContent = code;
document.body.appendChild(script);
Notice the template literal. We need to insert the code as a string, but with backticks it is more readable. Replace foo() with the function you want to override.
There is no need for deployment or bundling. You can install your extension right away from the path where you runned the generator
go to chrome://extensions
check developer mode
click upload unpacked extension
select manifest.json from your path
after that you just have to hit reload on the extensions page when you have made changes to contentscript.js.

you can load your file into the page by adding (or executing in the console) this script.
window.onload = function () {
var script = document.createElement('script');
script.src = '//localhost/your/script';
script.onload = function() {
console.log('your script have been loaded');
}
document.body.appendChild(script);
}
If the file that you want to override contains global functions/variables will be override with the new version in your file or if the elements that you want to override are namespaced just follow the path (e.g My.namespace.method = myNewMethod)

According to dharam's answer above,Resource Override works.
For people who doesn't have access to Chrome store,you can download the source here:
https://github.com/kylepaulsen/ResourceOverride
in Chrome,get into chrome://extensions/ ,enable developer mode,then load the extracted source root directory(which contains the file manifest.json) into Chrome.
tested for Chrome 73.0.3683.86 on Windows 10 .I can't post anything on StackOverflow before because https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js is blocked.Then in the settings of ResourceOverride,I map it to https://localhost/jquery-1.12.4.min.js and it finally works.
I run an ASP.NET Core 2.1 project with SSL enabled and localhost certificate enabled to serve jquery-1.12.4.min.js from local disk.
In the launchSettings.json,there is
"applicationUrl": "https://localhost:443;http://localhost:80",
in the Kestral profile(not IIS profile).

how to create an offline web app using javascript

I am looking for a solution on how to create an offline compatible web app using html, JavaScript, and maybe jQuery. I looked into service workers, but they aren’t comparable with all mobile devices yet. I also looked at the manifest file thing, it worked but it didn’t update the files. So now I’m here asking for a solution. I intend this application to be a music website that can be a web app. I like music and i take it everywhere so I’m trying to find out how i can save the website files for offline use so even if I don’t have WiFi, i can listen to my saved music. btw the files I’d like to save are:
main.js
Main.css
Index.html
EDIT 1
Also, if you know how to properly use service workers, can you show an example?

For future reference:
1/ Create a service worker file in the app root folder.
Example sw.js:
let cacheName = "core" // Whatever name
// Pass all assets here
// This example use a folder named «/core» in the root folder
// It is mandatory to add an icon (Important for mobile users)
let filesToCache = [
"/",
"/index.html",
"/core/app.css",
"/core/main.js",
"/core/otherlib.js",
"/core/favicon.ico"
]
self.addEventListener("install", function(e) {
e.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache)
})
)
})
self.addEventListener("fetch", function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request)
})
)
})
2/ Add an onload event anywhere in the app:
window.onload = () => {
"use strict";
if ("serviceWorker" in navigator && document.URL.split(":")[0] !== "file") {
navigator.serviceWorker.register("./sw.js");
}
}
3/ Create a manifest.json file in the app root folder.
{
"name": "APP",
"short_name": "App",
"lang": "en-US",
"start_url": "/index.html",
"display": "standalone"
}
4/ Test
Start a web server from the root folder:
php -S localhost:8090
Visit http://localhost:8090 one time.
Stop the web server with Ctrl + c.
Refresh http://localhost:8090, the page should respond.
To switch off when developing, remove the onload event, and in Firefox
visit about:debugging#workers to unregister the service.
Newest versions of Firefox are showing an application tab directly in the debugger instead. about:debugging#workers is not valid any more.
https://developer.mozilla.org/en-US/docs/Tools/Application/Service_workers
Source for more details
Manifest.json reference

If you need to save settings after the user left, you need to use cookies.
If you need some server data (and ajax requests for example), I'm afraid you can't do that offline.
For everything else (as far as I know), if you want it to work offline, you have to make the user's browser download all code it's going to use, including JQuery, Bootstrap, or any plugin code you want. You have to add them to your website sources and link them internally :
<script src="http://code.jquery.com/jquery-3-3-0-min.js"></script> <!-- Won't work offline.-->
<script src="./js/jquery-3-3-0-min.js"></script> <!-- Will work offline -->
Be careful about plugin dependencies ! For example Bootstrap 3.3.6 JS plugin needs JQuery 1.12.4
Hope it helps you !

Access Language JSON file with JS on Chrome without a webserver

tl/dr: How can I
internationalize strings in a html5/javascript application
while using a json file or something similar with key/value pairs (easy to translate)
without using javascript vars for every language string (ugly)
and if possible, without complex frameworks or packages
on Chrome (or something with same-origin-policy)
without a (local) webserver
without internet connection
Details:
I am developing a html5 touch game for older useres on an embedded IE system that will be changed to an embedded chrome system soon. Using a webserver is currently no option and I can't assume I have an internet connection all the time. Since the application should be in different languages, I currently have a json file that is accessed like this (irrelevant stuff left out):
//...
var language = "en"; //the language we want, same as the json file name
var key = "key"; //the key to the value we like to obtain
var languageMap;
var langFile = $.getJSON(language + ".json", function(data){
languageMap = data;
});
var langFileStatus = $.when(langFile);
langFileStatus.done(function () {
var value = languageMap[key];
//use the value of "key" here for awsome stuff
});
//...
the language file (e.g. "en.json") looks like this:
{
"key":"value",
"otherKey":"otherValue",
}
which works pretty well for IE and FF, but not on Chrome, because of the same-origin-policy. I read about an awsome trick to bypass that here, but I couldn't make it work in this case. I have never used JSON before in connection with JS, so maybe its an easy question. Different solutions for the whole problem are also very welcome (thats why I posted the complete problem). Thanks in advance!

Download Web Server for Chrome App from here. This is not exactly a server, but a handy simulation of the same that allows you to run your files locally as if they are running on a server.
It works without any Internet connection. More importantly, it has configuration options for CORS request thanks to recent updates Install it, select the folder in which your files are present, and you are ready! It's a really good way to test your code locally on Chrome.

Javascript Access to File on local machine

I want to open the files located on local drive using window.open().
When i try to access the file using window.open i am getting error "Access is denied."
Would somebody help to achieve this requirement in Internet explorer 8.0?
Thanks!

You can't. And thank God for that. Imagine how insecure the internet would've been if JS was able to access a client's file-system.
Of course, IE8 has the MS specific JScript superset (ActiveXObject), which does enable filesystem access:
var fileHandle,
fs = new ActiveXObject("Scripting.FileSystemObject");
fileHandle = fs.OpenTextFile("C:\\path\\to\\file.tmp", 1, true);
fileHandle.Write('This is written to a file');
console.log(fileHandle.ReadLine());//will log what we've just written to the file
But this is non-standard, is - I think- no longer supported either, and doesn't work X-browser.
Here's the documentation. At the bottom there's a link to a more detailed overview of the properties and methods this object has to offer, as you can see, there's a lot to choose from

I'm adding this answer just to be complete, but so far as Web Pages go, Elias Van Ootegem's answer is correct: you can't (and shouldn't be able to) get to the local hard drive.
But .. you can isf your page is an HTA (HTML Application) :
HTML Application wiki
This is essentially a web page with .hta as the extension(usually) and some extra tags to tell IE that it's an HTA application, not a web page.
This is something that runs via the windows operating system and is so far as I'm aware only available for IE. The HTA application opens as a web page in IE, but without the usual web navigation / favourites toolbars etc.
Note that if you have a page on an internet server delivered as an HTA application, you're likely to cause virus scanners and firewalls to pop up because this would essenstially be running a script whcih could do manything to your computer. Not good for general internert stuff at all, but might be useful in a secure environment like an intranet where the source of the application is known to be safe.
To get to the file system, you can use javascript code like this :
// set up a Fils System Object variable..
var FSO = new ActiveXObject("Scripting.FileSystemObject");
// function to read a file
function ReadFile(sFile) {
var f, ts;
var s="";
if(FSO.FileExists(sFile))
{
f = FSO.GetFile(sFile);
ts = f.OpenAsTextStream(ForReading, TristateUseDefault);
if (!ts.AtEndOfStream) {s = ts.ReadAll( )};
ts.Close( );
}
return s;
}
alert(ReadFile("c:\\somefilename.txt");

Permission denied error while executing shell command from JavaScript

I am trying to run shell command to open notepad from JavaScript. This is how my code looks like:
<script type="text/javascript">
function runNotepad() {
var oShell = new ActiveXObject("Shell.Application");
var commandtoRun = "C:\\WINDOWS\\Notepad.exe";
oShell.ShellExecute(commandtoRun, null, "", "open", "1");
}
</script>
When i try to run this, it throws me an error saying Microsoft JScript runtime error: Permission denied.
I also have set Allow active content to run in files on my computer in IE but still no luck.
Any idea what am i missing here?

Any idea what am i missing here?
No browser would allow JavaScript to arbitrarily start a process. This functionality is not available in Internet Explorer because of the security implications.
This will work if run from other Scripting Hosts, such as cscript, but not Internet Explorer.

You can't run or create native objects inside webpage javascript. The idea is that if someone could do that, then they could create a FileSystem object. Then, while you idly browse their webpage, they play havoc with your file system.
If you need to do this, and have the file saved on the host's machine, save it as an HTML app (*.hta).