I am trying to create custom user CSS for someone to use, that will remove all the extra stuff on a website they are viewing, except the body content. I figured I could use chromes inspect to get the sites CSS code, then edit it and use a custom user css extension on chrome to implement it. However the site has over 7000 lines of code in their CSS and I am still very new to CSS. Is there any simple way to make this work without having to go through 7000 lines of code?
Here is just a quick, bare-minimum, "prove of concept"-type starter of how you can achieve what you want using Firefox browser, just to get you going.
Create two files: manifest.json and RemoveStuff.js.
Put this inside manifest.json
{
"manifest_version": 2,
"name": "RemoveStuff",
"version": "1.0",
"content_scripts": [
{
"matches": ["*://*.google.com/*"],
"js": ["RemoveStuff.js"]
}
]
}
and put this inside RemoveStuff.js
document.getElementById("lga").outerHTML='';
Now using Firefox browser navigate to about:debugging, click Load Temporary Add-on and select RemoveStuff.js. Now go to google and you shouldn't see google's logo (or whatever picture/animation they have there).
You can start learning about Firefox extensions here, or Chrome here
Related
My question is similar to this one but the answer given there is for Vim and I need one for VS Code. I'm a real newbie, and I tried to solve this myself, but these attempts failed me:
Markdown Preview GitHub Styling - Says it allows user-defined custom css, but it styles html preview, not the text in the editor
Markdown Theme Kit - Points to custom .css files, but the included ones don't tell me how to do it differently for different heading levels
Markdown Header Coloring - Claims to do exactly this, but when I try to put in user-defined css to give each heading level a different color, I still get color changes between headings of the same level, even after closing/restarting VS Code.
Help is very appreciated.
There is a built-in way to style text, including Markdown headings, in the editor without an extension, using VSCode's Colour Theme settings:
Open your settings.json (~/.config/Code/User/settings.json) or Ctrl+p "settings", and between the top-level {} insert for example:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#9cecfb",
"fontStyle": "bold",
}
},
{
"scope": "heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#83a4d4",
}
}
]
}
I faced the same issue and find a way with the VSCode extension "Markdown header coloring"
Basically you have to
install the extension
set some custom settings in settings.json. You can find examples of custom settings in the section "User defined header coloring"
do not forget to reload the window after each modification: open Command Palette → type Reload window
Cheers
I have an extension that use an iFrame to embed a website in it, i want to inject a content script in it to modify the page inside the frame, i have managed to do that using:
"content_scripts": [{
"matches": ["http://website/*"],
"js": ["js/jquery/jquery-3.2.1.min.js", "src/myScriptToInject.js"],
"all_frames": true,
"run_at": "document_start"
}],
It works as intended but the problem is if i go now to the original website, it will naturally inject my script into it making it literally broken.
So i tried using chrome.tabs.executeScript(tab.id, {allFrames: true, runAt: 'document_start', file: 'src/myScriptToInject.js'}); but the thing is, if i understand correctly, i can not inject a script in a chrome extension for "security reasons".
Is there a way i have not thought of or a trick that would help me ?
I'm writing an extension for Chrome (currently testing in Chrome 51). I need the content script to run in dynamically created iframes.
For example, if I understand correctly, this site creates a new iframe each time the user clicks "Run".
This is my manifest (well, parts of it, which I thought were relevant):
"content_scripts": [
{
"matches": [ "<all_urls>", "http://*/*", "https://*/*"],
"match_about_blank": true,
"all_frames": true,
"run_at": "document_start",
...
}],
"permissions": [
"<all_urls>",
"http://*/",
"https://*/",
...
]
But the newly created frame still doesn't get my content script. I put a breakpoint in my content script's entry point and it isn't hit (it only hits for the main frame of the page, but not the frame which was dynamically created).
I know there are other similar questions but the Internet seems to be in agreement that match_about_blank is the way to go, but it doesn't work in my case.
UPDATE: So it turns out this wasn't the problem at all. I would have deleted the question (cause truly it's kind of embarrassing), but still there's a lesson to be learned here, since I spend A LOT of time investigating why my script isn't loaded.
In fact it WAS loaded. The breakpoint didn't hit probably because of some glitch in the map and/or source files (when I recompiled my TypeScript project and copied the files again, the breakpoint started hitting). I should have trusted the debugger window to see that my content script was loaded, instead of insisting on hitting the breakpoint...
I would like to know all the components and steps needed to create a Google Chrome extension that will be able to remove some DOM elements from inside an iframe within a certain page.
My research indicates that this is not possible through common javascript due to the same origin policy.
Manually removing the DOM elements from code inspection in Chrome is as far as I got, but I want to automate this.
From other similar questions (mainly this one), it appears that a Chrome extension should be able to do this.
I believe this is the most similar question but has not been answered as of yet, and also isn't as clear.
In all honesty, I could take it from here, but I think other people might benefit from this question and the answer, even if I end up answering myself.
Example HTML:
<!DOCTYPE html>
<html>
<body>
<iframe src="iframe.htm"></iframe>
</body>
</html>
And iframe.htm:
<!DOCTYPE html>
<html>
<body>
<div id="targetDiv"></div>
</body>
</html>
The end result should be the same as running (with jQuery):
$('#targetDiv').remove();
which of course does not work.
I accomplished what I wanted so here's the answer.
The first thing you need for Chrome extensions is the manifest file, manifest.json.
Here is a working example:
{
"manifest_version": 2,
"name": "iframe manipulation extension example",
"description": "This extension allows to run scripts that manipulate cross domain IFRAME contents.",
"version": "1.0",
"permissions": [
"*://target-site.com/*"
],
"content_scripts": [
{
"matches": [
"*://target-site.com/*"
],
"js": ["script.js"],
"all_frames": true
}
]
}
It has some self-explanatory values and then permissions and content_scripts.
It basically says that this extension will only work when accessing target-site.com.
We specify the file we want to run and also set "all_frames": true, which will run said file for each frame in the page.
You can of course run whatever javascript you need in the file/s you reference in your manifest.
Navigate to chrome://extensions/ to load your unpacked extension or pack it.
Please note there are other ways to get an extension to run scripts. This is just what I ended up with as the easiest way.
if I write a Chrome extension that runs a snippet of JS on a page, will it also run in any iframes I create? If so, does this apply for iframes created by Javascript after the DOM has loaded?
Thanks!
Yes, a Chrome Extension "content script" can run in all iframes (that are initially in the HTML when the page is loaded). In order to have the content script run in all frames you need to configure it to do so in the Chrome Extension manifest.json using the all_frames property:
http://code.google.com/chrome/extensions/content_scripts.html
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"],
"all_frames": true
}
],
...
}
No, the content scripts will NOT execute in the iframes loaded dynamically via JavaScript in the page.
Content scripts defined in the manifest (with "all_frames": true) will run on newly created iframes. What matters is that a new navigation starts for every frame, and content scripts are scheduled to be injected at that point.
In contrast, if you dynamically inject code with chrome.tabs.executeScript(), then it will only be injected in the frames present at the time you call it. You'd need some mechanism to detect new frames (Mutation observers? webNavigation API?) if you want to keep up with them.