Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome extension to modify page's script includes and JS

I work on a javascript library that customers include on their site to embed a UI widget. I want a way to test dev versions of the library live on the customer's site without requiring them to make any changes to their code. This would make it easy to debug issues and test new versions.

To do this I need to change the script include to point to my dev server, and then override the load() method that's called in the page to add an extra parameter to tell it what server to point to when making remote calls.

It looks like I can add JS to the page using a chrome extension, but I don't see any way to modify the page before it's loaded. Is there something I'm missing, or are chrome extensions not allowed to do this kind of thing?

like image 411
Herms Avatar asked Apr 09 '12 15:04

Herms


People also ask

Can Chrome extensions edit HTML?

Page Edit is an extension that let you make changes to any HTML webpage. To work with this add-on, simply open the toolbar popup UI and then click on the big toggle button at the left side.

Can you make a Chrome extension with JavaScript?

A chrome extension is a program that is installed in the Chrome browser that enhances the functionality of the browser. You can build one easily using web technologies like HTML, CSS, and JavaScript.

How do you change source code in Chrome?

Editing JavaScript code in real-time is possible in Chrome and Chromium based browsers. After loading a web page completely, press the F12 key to open the developer tools, then open the 'Sources' tab. Now open any Javascript file loaded on the browser and you can directly edit it by clicking anywhere in that file.

What is content JS in Chrome extension?

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.


Video Answer


1 Answers

I've done a fair amount of Chrome extension development, and I don't think there's any way to edit a page source before it's rendered by the browser. The two closest options are:

  • Content scripts allow you to toss in extra JavaScript and CSS files. You might be able to use these scripts to rewrite existing script tags in the page, but I'm not sure it would work out, since any script tags visible to your script through the DOM are already loaded or are being loaded.

  • WebRequest allows you to hijack HTTP requests, so you could have an extension reroute a request for library.js to library_dev.js.

Assuming your site is www.mysite.com and you keep your scripts in the /js directory:

chrome.webRequest.onBeforeRequest.addListener(     function(details) {         if( details.url == "http://www.mysite.com/js/library.js" )             return {redirectUrl: "http://www.mysite.com/js/library_dev.js" };     },     {urls: ["*://www.mysite.com/*.js"]},     ["blocking"]); 

The HTML source will look the same, but the document pulled in by <script src="library.js"></script> will now be a different file. This should achieve what you want.

like image 188
apsillers Avatar answered Oct 05 '22 03:10

apsillers