Chrome extension that adds icon to omnibox - google-chrome

I've done a lot of googling and have come up dry on this. I feel like I've seen it before but I can't find any extension in my arsenal that allows this.
What I would like to do is have a chrome extension that can place an icon (or text, even better) at the right side of the omnibox in chrome.
Does anyone know if this is even possible?

What you're looking for is called a Page Action.
In which application should we use Page Actions? If you want to add your extension's features to a few specific pages, use Page Actions. Otherwise, if you want to add features in most pages, use Browser Actions instead. Text cannot be added in Page Actions, though it can be added in Browser Actions with limitation by using Badge (a bit of text that is layered over the icon).
Some good examples of this kind of extensions to help you picture the concept:
Google's RSS Subscription Extension. This extension only injects if it finds RSS feeds on a page
Lyrics for Google Chrome. This extension only injects its scripts in YouTube pages, create a new div next to the video to display the lyrics of a music vid.

Related

How to disable an internal settings page/tab of a browser from opening?

As context, I would say that I am suffering from a self diagnosed Youtube Addiction. For which, I decided to use Blocksite extension to block the said website which worked pretty well. But after sometime, I came across a page called brave://extensions which is part of the internal settings of the Brave browser. Due to which, my addiction resurfaced stronger than before as I could now toggle the blocksite extension off through this page. I have tried to block this webpage as well through the extension but it doesn't work on this page as it said the url is incorrect since it is not exactly a url but internal settings tab of the browser. Is there a way I can block this page and other internal tabs from opening? Please help.
Use channel blocker and unhook extensions to get rid of unwanted content on youtube.
With the first one, you basically block youtube channels that come to the search result all the time. And with the hook, you have many options. You are not given video suggestions anymore.

How can I edit the body class of this website?

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".

Where can I modify Chrome bookmarks?

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

Change icon based on posts from another page

Apologies if this has been asked before. I searched and couldn't find anything.
I have a basic landing page website that has an icon that links to "Hot Alerts", ie notifications of system outages. What I'm wondering is if there's a way to either change the icon or add a notification bubble (similar to Facebook notifications) if content on a Sharepoint blog has been updated in the past "X" hours.
Here's the icon I'm referring to:
Hot Alerts Icon
I've found examples of how to style the icon with CSS, but those all require manually entering the number of new notifications.
What I need is a way for the icon to "check" the sharepoint page for its most recent post when the landing page is loaded.
Most of my colleagues use Internet Explorer, but Chrome is creeping into the workflow.
What you need to use it the Javascript Object Model (JSOM). You will be able to read lists (for new posts) upon page loading and then showing or hiding the icon. A lot of example code to read lists can be found on SO.
If you want to use a 'bubble', take a look at sp.ui.notify (https://msdn.microsoft.com/en-us/library/office/ee550701%28v=office.14%29.aspx) methods to show an overlay notification popup on the page.
It's very unlikely this can be done with pure CSS. Any of the following languages will provide suitable solutions: JQuery, JS, PHP.
In PHP, you could use $_GET to place the variable in the URL. So one page would use $_GET to post the variable to the URL and the PHP file loading the page would use it to retrieve the variable from the URL.

Creating a Badge-less Google Chrome Extension

According to the docs I have made an Google Chrome Extension that I would describe as a "browser action" because it is present on all pages. However, my extension doesn't require any interaction so having a badge next to the omnibox is pretty wasteful. I have installed extensions that do not appear anywhere (except maybe in the context menu). How is that done and is that best practice?
Having page action or browser action icons is totally optional if you don't have any popup attached to them, so just remove the whole browser_action section from your manifest file.