An extension to help you gain full control of any website by redirecting traffic, replacing, editing, or inserting new content.
License: MIT License
See what this means here: maintenance_notice.md.
Resource Override is an extension to help you gain full control of any website by redirecting traffic, replacing, editing, or inserting new content.
The replacement file doesn't show up in the sources in dev tools, which means I can't put breakpoints in the file, making this useless for debugging.
On Chrome 84 Network and Sources, etc. shows Resource Override URL to URL doesn't have any affect, the extension is no longer working.
After more checking, I find a workaround by adding local path (that is also defined in Resource Override URL to URL) in Chrome DEV Tools > Source> Filesystem. By some reason Chrome DEV Tools > Source > Overrides doesn't workaround it, neither when only using Source> Filesystem.
How can I add the resource override rules to the HTML file?
I really need the option to inject my scripts to only top frames and not all the iframes in the page.
I created this issue and will create a pull request for adding this kind of support.
What I had in mind is a global option (some kind of checkbox) for 'inject only to top frames' which will be off be default.
@kylepaulsen WDYT? Is it OK with you?
Thanks
Hi!
I think it would be a great idea to have the possibility of setting a regex as Tab URL.
I'm using Resource Overrides to match a set of URLs and as for now, I've to change the Tab URL when I want to match another page of a website.
Do you think it could be implemented ?
Thank you very much!
Thomas
Hi.
Is it possible to somehow add a dark theme to your extension?
Something simple (see the image) would do..
One switch in the Option to load the style_dark.css file, instead of style.css, which is default.
Or could you tell me if there is a way how can I override these two files (style.css and on-off-switch.css)?
I mean, it is very easy with usual web sites, but I couldn't figure out how to do it with extensions styles.
Thanks in advance.
.
Currently, I can either replace a resource loaded from an URL, or I can add a script or stylesheet from the editor. I would love to add scripts or stylesheets (<script> or <link> tags) from an URL though (so that e.g. CSS @import etc is also working fine), effectively an "Inject resource from URL" rule (as oposed to "Inject File", which might make more sense to call "Inject custom resource" then).
Maybe URLs starting with file:// could be included as plain text again, but otherwise a <script src="SPECIFIED URL"></script> is totally enough.
An alternative would be to allow "File Type: HTML" for "Inject File", so I can add stuff like <script src="..."></script> to the <head>.
A workaround is to add a Inject File with "File Type: JavaScript", with the following content:
[
{ tag: "script", src: "..." },
{ tag: "link", rel: "stylesheet", href: "..." }
].forEach(def => {
const el = document.createElement(def.tag);
for (let attr in def) if (attr != "tag") el.setAttribute(attr, def[attr]);
document.currentScript.parentElement.appendChild(el);
});It looks like prepending something to a URL causes the plugin to get stuck in a loop. Splitting the rule into two separate rules for HTTP and HTTPS doesn't help, either. It looks like what's needed is a way to have a rule work only against the entire URL instead of a substring. Perhaps a "^" operator (as with sed) to mark the beginning would work.
Consider this example:
*://**.4chan.org/*** rewritten to https://archive.is/*://**.4chan.org/***
If I click a link (such as http://boards.4chan.org/pol/thread/160062891/creamy-memes-for-our-team), it gets redirected to https://archive.is/http://boards.4chan.org/pol/thread/160062891/creamy-memes-for-our-team, as I want. When I then click the "archive this URL" link (https://archive.is/?url=http://boards.4chan.org/pol/thread/160062891/creamy-memes-for-our-team), though, it then gets redirected to https://archive.is/https://archive.is/?url=http://boards.4chan.org/pol/thread/160062891/creamy-memes-for-our-team, which isn't where we want to go.
I'm trying to redirect requests from a webapp to an internal server. But I keep getting these errors in console whenever the app tries to send a request, and I'm unable to login because of it (api won't work)
I am wondering if there is a way I can override web resources as you have done here with a tampermonkey script. I want to be able to inject a custom script without the need for users to have this extension. Any ideas?
Now the rule only work when I have opened the dev pane.
Hi, I have a trouble when modifying the header of a request.
The header modify rules only take effect in the first tab group.
I am not sure but I don't think it should return in the loop as following:
A temporary workaround is simple: put all header rules in the first tab group.
Hi, Great extension!
I've been pulling my hairs for hours and later found that it only matches resources in tag. Anything placed in body tag wouldn't get replaced :(
Hello!
How to fix block (blocked:other) when try to load from local PC or another site?
When load page, I have issue with no load site http://prntscr.com/nytroq
What does it mean? On some site when use https I download Disable Content-Security-Policy plugin for Chrome and it help for me, but not in this situation.
Hello,
First, thanks for this amazing extension, I use it every single day in my web development tasks at work :).
I think there might be a bug though, now when I select HTML as the file type in a URL -> File resource overriding, the response mime type is set to CSS, and when I go back to my rule it is set to 'CSS' instead of 'HTML' as well.
Best regards.
Me and my team have been using resource over ride and it was working fine. We usually use the file over write so we can make changes to the file normally given by the server such as JS and HTML files but ever since the update files are not being over written properly. We will give a path and provide an over write but chrome still uses the original server file and never loads our over ride.
Doing it does not seem to be working and I cannot embed a local file (via file:///)
Even with allow access to file URLS on :\
I love this extension! It's a great help for testing all sorts of things on a given site. I'd like to request the ability to give a name/nickname to any or all of my Tab Groups. I have quite a number of them set up at any given time, and it would be nice to be able to distinguish them by some logical name.
Hello,
this is not a bug but perhaps a gap that would be nice to fill in the docs as I suppose it is not an uncommon problem. When I use URL->File redirect, it is applied but the XHR call fails with:
Fetch API cannot load . Redirects to data: URL are allowed only when mode is "no-cors".
Is it possible to fix e.g. by using R.O. to set some req/response headers? Thank you!!!
PS: Perhaps it is related to whatwg/fetch#111 and/or https://bugs.chromium.org/p/chromium/issues/detail?id=521475 but I do not understand the problem well enough.
Tried to use URL -> File to replace the response of an ajax call.
I set the content of the file as :
/* mime: application/json */
{ json content }
Always get error: violates the following Content Security Policy directive: "default-src 'self' https://.anz.co.nz https://.anz.com https://*.qualtrics.com".
Detail as below:
[Resource Override] File Override Matched:
[Report Only] Refused to connect to 'data:application/json;charset=UTF-8;base64,ew0KICAiYWNjb3VudHMiIDogWyB7DQogICAgImlkIiA6ICJVaGN3ZXJxOCIsDQogICAgImFjY291bnRUeXBlIiA6ICJjdXJyZW50IiwNCiAgICAiY3VzdG9tZXIiIDogIlVocXJydXdyIiwNCiAgICAiYWNjb3VudE51bWJlciIgOiAiMDEtMDc1OS0wMDE2NTE4LTAwIiwNCiAgICAib3JkZXIiIDogMCwNCiAgICAicHJvZHVjdE5hbWUiIDogIkJ1c2luZXNzIEZsZXhpYmxlIEZhY2lsaXR5IiwNCiAgICAiYmFsYW5jZSIgOiB7DQogICAgICAiYW1vdW50IiA6IDMxMDQxLjk3LA0KICAgICAgImN1cnJlbmN5Q29kZSIgOiAiTlpEIiwNCiAgICAgICJjdXJyZW5jeVN5bWJvbCIgOiAiJCIsDQogICAgICAiaW5kaWNhdG9yIiA6...ltdFNvdXJjZSIgOiBmYWxzZSwNCiAgICAibGlua3MiIDogWyB7DQogICAgICAicmVsIiA6ICJhY2NvdW50RXh0cmFJbmZvIiwNCiAgICAgICJocmVmIiA6ICJleHRyYWluZm8iDQogICAgfSBdLA0KICAgICJpc0VsaWdpYmxlQXNTb3VyY2VBY2NvdW50Rm9yTG9hblBheW1lbnQiIDogZmFsc2UsDQogICAgImltYWdlc0Jhc2VVcmwiIDogIi9pbWFnZS1jYWNoZS9wcm9kdWN0LWltYWdlcy9mb3JlaWduLWN1cnJlbmN5L1VTRC92Mi8iLA0KICAgICJjdXJyZW5jeUNvZGUiIDogIlVTRCIsDQogICAgImludGVyZXN0UmF0ZSIgOiAwLjEyMDAwMDAwLA0KICAgICJtYXR1cml0eURhdGUiIDogIjIwMTQtMDMtMDUiLA0KICAgICJpc0ZpeGVkUmF0ZSIgOiBmYWxzZQ0KICB9IF0NCn0=' because it violates the following Content Security Policy directive: "default-src 'self' https://.anz.co.nz https://.anz.com https://*.qualtrics.com". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
Most of the labels are coloured in black.
Now that DeveloperTools have a dark theme, its hard to read.
For some reason, resource override appends a copy of the original resource to the bottom of the overridden resource. I'm using url->file overriding and this issue isn't present on Chromium based browsers.
Here is some sample code creating a SharedWorker:
`
const myWorker = new SharedWorker('worker.js')
myWorker.port.start()
myWorker.port.onmessage = function (e) {
console.log('Message received from worker', e)
}
window.setTimeout(() => {
console.log('Posting message to worker')
myWorker.port.postMessage('hello')
}, 3000)
`
If I place the worker file (worker.js) on the same server as the html that contains the above code, then I see console logs for messages going to a from the worker.
However, if I host the worker locally with a resource override pointing at it, then creating the SharedWorker fails silently and the network tab shows the request as stalled with a status of (pending).
If I simply load the shared worker js file in a browser tab then Resource Override serves it fine, so it's not that RO is unable to serve the file to the browser. It just seems unable to serve the file for the purpose of being used as a Shared Worker.
I am using url -> url mapping with http-server -c-1 --cors. The requests are not shown in the http-server logs, so appear to be blocked in the browser.
Example code:
example.zip
I have application that add hash at the end (in query string) to prevent browser cache. And it don't work when I try to overwrite the file with my content.
I wonder if it is possible with your extension to solve the issue I'm dealing with. My environment is getting the html files from a server API call, then it merges with other html files. Is there anyway I could edit my htmls in my pc with a localhost and your extension?
This seems very rational that we should be able to Map the URL to a file in the directory instead of just copy the file content to another editor that you provided.
It make everything so difficult to copy all the contents to your files, then copy them back to real files to check in.
Please consider solving this issue.
Thanks
When I browse a site for which I have override rules set up but deactivated the console is filled with repeated items stating that the rule is off, etc., as in this screenshot. These can be filtered out by disabling info-level items but that also filters other useful console messages. Can you suggest a way around this please?
So - I recently realized I could use a feature where I could actually give RO a URL and have it add it to the page as a new script file or CSS file - so I could test a script I've got hosted elsewhere on a page BEFORE I commit to adding it...
Since a few weeks i'm noticing an error in my console on every single page, even though Resource Override does not have any active rules
Error in event handler for (unknown): TypeError: Cannot read property 'on' of null
at chrome-extension://pkoacgokdfckfpndoffpifphamojphii/src/inject/scriptInjector.js:38:24
at chrome-extension://pkoacgokdfckfpndoffpifphamojphii/src/inject/scriptInjector.js:37:17
clients5.google.com/:1
This happens on Chrome Canary 72, but not on Chrome (regular) 70
(macOS 10.14 mojave, but earlier also on 10.13)
The extension doesn't seem to be matching anything. I've just got * as the url, and the logs keep reporting:
[Resource Override] Rule is off or tab URL does not match: * scriptInjector.js:58
Am I missing something?
Hi,
I try to override a .js file from a website, but when I do the file doesn't load and I get the following error message :
website.com/:1 Refused to load the script 'data:text/javascript;charset=UTF-8;base64,...'
because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'
https://*.website.com https://website.com https://*.website1.com https://website.com https://cdn.website.net
https://cdnjs.cloudflare.com https://www.google.com https://www.gstatic.com https://www.googletagmanager.com
https://www.google-analytics.com https://*.website2.com https://*.website2.net". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Is there a way to fix that ?
for example responding to requests to an API endpoint with this exact response:
HTTP/1.1 200 OK
Date: Sat, 01 Jan 1970 00:00:00 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Set-Cookie: expires=Sun, 00-Jan-81 00:00:00 GMT; path=/; domain=.example.com; HttpOnly
Allow: HEAD, OPTIONS, GET
Strict-Transport-Security: max-age=31536000; includeSubDomains
Via: 1.1 google
Alt-Svc: clear
Server: nginx
@kylepaulsen, first of all thanks for this awesome extension. Very clever and very handy. To be honest the UI to edit the file is not very friendly. The find bar disappears on the first search and it stops at the first search. So it's virtually impossible to look for the next occurrence.
Is it possible to load the file with an external editor and save it? Of course I can copy the whole thing to my editor and then paste it back once finished but that's a little cumbersome.
Hello,
Is there a way to override a https resource with a http one ? My browser is blocking it.
(Mixed Content)
Hi, thanks for an awesome extension, there was some important features specifically for me that was missing and that no other plugin had so i really had no other options than to code it by hand.
I created a forked version(https://github.com/starkapandan/ResourceOverride) and would one day possibly see these features added to the real plugin.
The most important one here is a regex live file replacer(please check readme on fork for exact details) instead of fileoverride.
The issue with file override is that once developers update their script it simply breaks the site when overriding with old fileoverride.
A regex replacer handles this case perfectly by always fetching up to date script and before its loaded into website uses regex replacing of certain sections.
All of this functionality is available in the fork for you to copy paste if you would have time, i simply placed under a new rule called "filereplacer" so other type of rules are untouched. Obviously migrating this over to here would be a little more work than copy and paste, but the functionality is already coded for that specific rule only, and can be added with fairly little work.
Now another one that would be awesome to see is some form of cloud sync. I know that this is currently impossible with chrome.storage.sync since it has such low quota for fairly large settings BUT, in my forked version i have managed to this in a fairly simple way, just to maybe illustrate a possible workaround (only works if it's loaded in chrome settings "load unpacked plugin"). To accomplish this, i placed all of the settings DIRECTLY in a file called config.js in same directory as the plugin. Now if you place the whole plugin into a dropbox/onedrive/googledrive synced folder, and load plugin directly from there into chrome. you will have the plugin + all settings synced to all your computers.
And if you want to change settings, this is done in the config.js file instead of the webui or developers tab.
< The bug >
Whenever I have the dev tools open and a script is replaced, my RAM is slowly taken up — presumably by the dev tools themselves.
< My expectations >
Not eating up RAM, similar to what happens if I'm not replacing a script
< Steps to reproduce >
Not sure if it's just specific to replacing MultiplayerPiano.com's script.js
Tested in Chrome and Vivaldi.
< System info >
Hi Kyle. Thanks a lot for the extension. It's amazing. :)
Can you please add support for the async/await syntax sugar on the javascript code editor?
If one clicks "Beautify JS" on the code editor the code is formatted in a way that the code breaks. For example:
code before beautification:
async function foo() {}code after beautification:
async
function foo() {}The resulted javascript breaks when injected.
Thanks a lot.
As you can see in the screenshot, the on/off button disappeared in the latest Chrome Canary. It seems it has to do with this error message:
Uncaught TypeError: document.registerElement is not a function
at onOffSwitch.js:8
at onOffSwitch.js:37
https://github.com/kylepaulsen/ResourceOverride/blob/master/src/ui/onOffSwitch.js#L8
I don't really know about this API, but it seems it's deprecated and should be replace with this: https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define
I was able to create custom rules for particular websites and save the rules. I was wondering whether it is possible to save my custom rules and package it separately.
Hello !
Thanks for this extension, it's really helpful
I have an issue with CORS. I added JWT system on my server side. Since when i use the extension i have this error.
Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.
I tried few hacks with Headers, it didn't work so far. Do you how to deal with that ?
Thanks for your help. :)
Install Resource Override cannot override file. But adding the Adblock Plus, it seems to work, hope for problem being fixed
I'm using RO on the Edge browser. It works fine, but two times I had sad issue, where all my configured scripts just resets and disappeared. It's bad because I didn't backup one of them, and a lot of work have been lost.
I don't know when it happens exactly. Any ideas?
Where is the config stored exactly?
Unfortunately the application where I'm trying to override resources is doing some AJAX calls synchronously. It looks like when I have specified redirect rules for such calls the request fails.
In network trace I just see "Failed".
Are synchronous AJAX calls not supported? Could this be enabled?
This is an awesome tool :) Thanks for making it!
Is this at all possible? I know there are workarounds, but it would be great if I didn't have to copy and paste my build code into the extension each time I rebuilt.
If you're short on time, just some insight into whether or not this is possible would allow me to branch out and/or make a pull request.
Thanks!
Hello Kyle,
I hope you would consider adding the feature to respond with JSON so the extension can be used for REST API testing. So when an endpoint is queried we can give the app our own JSON response?
Cheers
Hi,
Any way to override a js file which is served each time with a new name with a fixed number of characters?
I believe it's a good feature to add if it's not possible to do it yet. Is there any idea if it's possible to make it? I can offer myself to develop it.
Kind regards.
Hello, I think that in some cases the file replacement from Resource Override can be blocked by Content Security Policy headers.
For example, I see this when trying to replace a script:
Some Chrome extensions enable CSP override (such as https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden/related?hl=en), but it would be great if the option was bundled in Resource Override.
Thanks for this great plugin.
I could not understand how do I exchange certain original tags to another tags?
For example, how to change all tags from <meta> to <p>?
Configuration isn't being synced between browser instances. It would be really helpful if it did.
Now that Firefox supports the (pretty much) same WebExtensions API like Chrome it would be cool if Ressource Override could be migrated to Firefox too ❤️
Ressources:
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
