Trigger event on chrome extension icon - google-chrome

It is possible to trigger a click event on chrome extension icon? Like in jquery we use to do:
$('#blabla').trigger('click');
My goal: if a certain element is visible in the popup, than trigger a click event on the icon. I'm aware of the chrome.browserAction, but for this I have to do a click manually.

No, it's not possible.
Chrome/Chromium considers the actual user interaction a very important factor to grant certain temporary privileges to the code executed in this interaction's event handler. Like the ability to access DOM of the active tab when only "activeTab" permission is specified in manifest.json. Or the ability to use clipboard API and some other things.

Related

Changing chrome extension html using chrome storage event listener

With this code I want to create an event listener for whenever chrome storage updates.
I want 2 things to happen when the event listener is triggered:
The code will console log the updated values. This part works.
I want the HTML for the extension (the document that opens in the corner when you click the icon) to update and render the data value that is in chrome storage. This is that part I need help with.
chrome.storage.onChanged.addListener(function(changes, namespace) {
//part 1
console.log('New data type is %s. New value is %s',
changes['type'].newValue, changes['data'].newValue)
//part 2
document.getElementById('output').innerHTML =
changes['data'].newValue
});
I realize that calling "document" inside the function doesn't make sense, but I'm unsure how to move forward to get it to render in the extension's HTML.
I tried creating an event listener for when the context menu is accessed (users can update the chrome storage but clicking a button in the context menu) but I couldn't get it to work. Also the event should trigger when chrome storage is updated, not when the context menu is simply accessed.
Right now I get this error:
Error in event handler: TypeError: Cannot set property 'innerHTML' of null
(There is an element with id 'output', so that isn't the problem)
Thanks for your help!
The background script runs in a separate hidden background page. It's not related to the browserAction or pageAction popup page, it doesn't have any of the popup page elements, its DOM is empty except for the auto-generated script tags of the background scripts.
The popup is also a separate page and just like any normal page its environment/DOM exists only when the page is shown. You can't modify it when it's not shown. You can't show it from your code in general case either.
Solution 1
Put that onChanged listener in popup.js script that's loaded in your popup.html (declared as "browser_action": {"default_popup":"popup.html"} in your manifest.json) using the standard <script src="popup.js"></script> tag. It will update the popup page if it's shown, and to display the current values when the popup opens read them with chrome.storage.local.get or chrome.storage.sync.get depending on which storage you're using in your extension.
Solution 2
Use chrome.notifications API to show a small notification at the bottom of the screen, see also the official demo extensions.
Solution 3
Use chrome.browserAction.setBadgeText to display short text like a temperature right under the extension icon. Don't forget to declare at least "browser_action": {} in your manifest.json.

Chrome Extension installation popup

When an extension is installed in chrome, a popup comes up which says [Extension_name] has been added to chrome.
This is the default popup having extension icon and some message. I want to modify this popup data. is there any api which we can use to modify it.
There is no such API, but you can use onInstalled event to open new tab with your own description.
In addition to Deliaz's answer, you can create either a browser action or a page action popup. You can change popup html dynamically to make it look completely different depending on the situation but you can't open it programmatically (desktop notifications could be used for alerts).
Here's another reference which might also help.

Trigger action when away from the tab(where it is allowed) in chrome extension

I am building a chrome extension for all gmail tabs.
I want to run some scripts only when I am visiting some other tab in chrome where it is not enabled/matched. How can I do that?
I think you are opt to use chrome.tabs.onActivated.addListener. This listener
"Fires when the active tab in a window changes. Note that the tab's
URL may not be set at the time this event fired, but you can listen to
onUpdated events to be notified when a URL is set.
This listener is assigned in the background.js part of the extension. That's because background.js continues to listen to state changes of windows or tabs. Dont forget to include tab permissions when using this.
This SO thread might offer an insight also.

Chrome extension that runs in the background on window open event?

How can I make a Chrome extensions that is not a popup or a button?
I wanna have a script running whenever the window is opened and iterate thru all its tabs performing actions on each tab.
I also need (is this possible?) want to add to the same extension buttons (+keyboard shortcuts?) that when clicked, perform actions on all tabs.
Then I need control on these buttons visibility, and make them visible only in certain conditions (e.g. show only when page is loading, hide when not-loading).
Where do I put my script and how do I refer to it in my *.json manifest?
Any info/links will be appreciated.
The answers to 0 and 1 can directly be found in the documentation, specifically background pages, chrome.windows API and chrome.tabs API.
To bind global events, use the chrome.experimental.keybinding API. Because this API is experimental, you have to enable it first at chrome://flags. Also, the extension cannot be uploaded to the Chrome Web store.
If you want to add an "extension button" which performs some action on click, define a browser action and bind an event listener to chrome.browserAction.onClicked.
To select all tabs, use chrome.tabs.query({}, callback) method ({} means no filter, so all tabs are selected).
Browser action buttons are always visible. If you want to create a button which is not always visible, use a page action instead. The chrome.tabs module includes several events which can be used to find out whether your conditions are met.
As for putting up the script and the manifest file, read the documentation on Manifest files and explore some examples.

For a Google Chrome extension, how can I create an on/off toggle in the browser icon?

For example, Adblock has a "turn off" option when you click the browser icon in the dropdown.
I would like users to be able to toggle on/off my extension for a domain, instead of having to disable it to turn it off.
Another option could be to put a static button on the webpage layout and have that toggle the extension or stylesheet on/off.
You need to add a 'browser_action' to the extension. You define it in the manifest.json as detailed here.
Use the onClicked event listener in your background script/page to disable/enable the application based on user clicks.
You can also use the same event handler function to make changes to the browser action icon or badge text to show the state change / current state to user.
Update Feb 2023:
When using manifest version 3, use action instead of browser_action. Details here.
you could try a mixture of local storage, a toggle in a popup, and conditional statements surrounding your code
Abraham, you could try and use this Chrome extension:
Link: https://chrome.google.com/webstore/detail/niemebbfnfbjfojajlmnbiikmcpjkkja
You can use it to quickle enable/disable all your extensions.
I found this extension on this website:
http://www.addictivetips.com/internet-tips/disable-all-extensions-in-chrome-with-a-single-click/
The article also mentions 2 extensions with which you can enable/disable an extension through a command in the URL box ("enable <>")