I would like to change the body class="" of a website, in this case it's WhatsApp Web, if you go to inspect element and change body class="web" to body class="web dark" the page becomes dark. How can I save this so I don't have to do this every time I load the page? Thanks!
You'll likely need to use a Chrome Extension for this. Here is a helpful link to a similar use-case where the person was attempting to create their own extension, if you're interested in creating your own solution. Here's a reference from the Google Chrome team on creating your own Chrome extension.
If you're looking for something a little more out-of-the-box, check out this Chrome Plugin, Page Manipulator. There are several other plugins such as TaperMonkey.
The idea is to have some extension in Chrome that will automatically apply the changes you attempting to do directly to the DOM of the page.
what you are trying to do is not possible because each time you reload the page the code will get updated(By updated i mean the orignal code).
But there is a way you can do the same by creating your own add-ons in mozilla or extensions for chrome what this extension will do is whenever they will see a "tag" or "class" matching the constraint will get replace by the value you want.
like in your case from "web" to "web dark".
Related
I want to code an extension that modifies your bookmarks in Google Chrome. For example, it should expand different sub-sites (e.g. reddit subreddits) when hovering over a bookmark.
Where do I find the bookmark function, though? Like the part that says for example "when hovering over an icon, background goes grey". I'd have to modify exactly those parts.
For what you are referring to, a simple CSS style modification will achieve. To implement an extension into chrome, you will want to start here:
Google Chrome Extension Development
Some resources for you:
Developer Guide - this contains all the extensible chrome APIs
chrome.bookmarks API - this is the API that will interact with and manipulate bookmarks
There are also some resources out there that are helpful for learning how to create a chrome extension. A good starting point may be this:
How to create and publish a chrome extension in 20 minutes
Chrome extensions have a "Details" page (for example, here's Adblock's). On this page you can change the permissions of the extension to be one of: On click, On specific sites, or On all sites. These options determine whether the extension runs all the time on every site or only when you want them to.
This extension, however, does not change behavior when I modify the permissions from its Details page. Why is this the case? Here's their source code on Github.
I noticed that they use a persistent background page. Would that cause the issue?
Thanks in advance.
The correct answer as stated in the comments:
[the extension] doesn't actually run on sites other than Reddit. It just takes an URL of a tab and runs it through Reddit.
This means that changing the permissions in the Details page doesn't affect anything.
In my Google Chrome extension, I need to be able to get the current page HTML, including any updated Ajax HTML (unlike the browser's View Source command, which doesn't update it).
Is there a way to get it as a string in my Extension?
Suppose my extension is a right-click context menu called "View Actual HTML Source" which should print the current HTML to the console, or maybe count the number of certain tags there. I wasn't able to find an easy answer to this.
You can get the current state of the DOM as HTML programmatically using document.documentElement.innerHTML
Or just use Developer Tools
I followed the exact solution here, and this gave me the Page Source HTML:
Getting the source HTML of the current page from chrome extension
The solution is to inject the HTML into the Popup.
I have been reading the dev guide but haven't been able to work out how to put my own codes into webpages
I know it is possible because AVG uses it (in it's link scanner), and FastestChrome extension uses it too (highlight something and a link to a search pops up).
I have a backgrounded page but I can't get it to effect the webpages I go on (permissions are correct as I can get css to effect)
I am probably missing something really simple :/
It's not intuitively presented in the documentation but your background page can not access the current webpage b/c they are in different contexts. In other words the background page is it's own separate page so it has no access to any other page's DOM.
If you want to affect the page the user is viewing in the browser you will need to use what is referred to as a "content script".
If you want to communicate between content scripts and the background page you will need to refer to the message passing API. Check out my extension's source code for reference. I do exactly that.
Just remember...
Background Page: used for general logic in your extension, not anything page specific.
Content Scripts: are loaded into every page the user sees, and can manipulate that specific page.
Those probably use Content Scripts to inject Javascript into webpages. These scripts run in the context of the web pages and can access the DOM.
You can either define a script to always run in a web page by declaring the script file in the extension manifest, or you can use your background page to inject a script when needed.
What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.