Chrome Extension Disappears while clicking outside of its resolution - google-chrome-extension

Is there anyway that I can make Chrome Extension's window stick in window even while clicking outside of its resolution?
I'm trying to make it Sticky on the window for one simple google login so that I don't need to go back again to click extension to open it.

By using tabs API you could retrieve windowId of the window you want to focus on. You could do it only if needed e.g. by using query method from that API. You could pass url for example.
If you created a window that you want to be still focused then you have its id already in the hand.
After that, you could use window API update method in order to draw attention or focus. Take a look at updateInfo params - focus and drawAttention.
The same could be done by using tabs API. You could pass tabId and the URL you want to redirect someone.
Now in order to make it work you have a couple of options:
You can use setInterval which would be used to check if the tabId and windowId you want are active and focus the window/tab you want in another case.
Because in the MV3 extensions using setInterval is not recommended you could use alarms. Please take a look at AlarmCreateInfo, when param should help you instead of triggering the alarm periodically.
You could also use event listeners from both windows and tabs API to listen on tab / window focus change. Then you will be able block the change (from user perspective) by methods I described before.
You should play with all approaches and pick on that suits you, because all of them have some drawback. But don't want to make that comment very long.

Related

Chrome Extension overwrite existing webpage

I will try to make this as short as possible. I am making a Chrome extension and I wanted to have an integrated settings tab so users can customize their experience. Now, I want this settings tab to be somewhat of an "extension" to an existing settings tab in a website. Let me explain.
The website I am talking about is Roblox.com, a popular gaming platform. When logged in, you have the ability to visit your settings, which look something like this:
Now, in order to navigate the different setting "tabs," you simply click on a button and it takes you to another change. The URL corresponding to each page is https://www.roblox.com/my/account#!/TAB_NAME, with TAB_NAME being the name of the tab. What I want to do is make my own "tab" where once the player clicks, it will bring them to a settings tab where they can tweak the extension's settings. This would look something like this:
I am fully aware on how to this (inject a button into the list and customize said button), but what I don't know what to do is make it so that once the button is clicked, it will not redirect you to another website, but will simply "switch tabs" like it would with any other setting. There is an extension that already does that called "Roblox+", where it adds a button to the list, and once clicked, it takes you to a similar-looking page with the URL https://www.roblox.com/my/account?tab=rplus#!/info. From my understanding, since the tab name isn't a header, the URL does not change, which allows for a custom webpage. Now, if you were to paste that URL in a browser without the extension, then it would simply redirect you to the "Account Info" tab (although the URL remains). Here is how the Roblox+ extension settings page looks like:
Now, from what I can assume, what happens is that right after the normal account information page is loaded, it removes all the HTML elements that are related to the account information tab and re-creates the entire page using custom HTML elements. That is something similar to what I want to do. Regardless of this, I do have one question. Is it possible to somehow "overwrite" a certain domain so that, let's say, the URL https://www.roblox.com/my/account#!/my_plugin_settings led to my custom page (even if that means that the page is made from an HTML file) instead of where it was supposed to lead? If that isn't possible, would it be better to create a custom settings page outside of the Roblox website or somehow inject my own into the current settings?
This is the question that I have. Hopefully I explained it well. If someone could assist me on this, then that would be amazing. Thank you for your time and help, I truly appreciate it.

Method to autoupdate Chrome Extension badge

I'm building a Chrome extension that makes the badge show a number returned from an API. I have the code working fine, but I have it listening for DOMContentLoaded, so it only updates when the user opens up the extension.
I would like the extension to check the API every time the browser loads a page. I do not need to change anything in the page, I just want to use it for timing.
I'm not sure what I should be using, should I be using background pages, event pages, or something else? What would be the best way to go about this?
Thanks in advance!
The api you want for “every time the browser loads a page” is chrome.tabs.onUpdated. You’d have:
chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab) {
chrome.browserAction.setBadgeText({"text":"ABCD","tabId":tabId});
});
An easy approach for development is to use a background page, get it working, and then figure out what changes you need to convert it to an event page. With this stub however, nothing is stopping you from making it an event page.

Can Chrome Extension’s new options_ui trigger a page action?

I’ve been placing a page action on the options page of my Chrome extension. options.js calls chrome.runtime.connect({"name":"someName"}), and background.js has
chrome.runtime.onConnect.addListener(function(port) {
chrome.pageAction.show(port.sender.tab.id);
});
Unfortunately, in the new options_ui with the recommended default (and someday mandatory) "open_in_tab":false, the Sender's tab won't be set. Is there a way to get the tab id in order to show the page action?
I could use tabs.query to get the chrome://extensions/ tab, but that requires the tabs permission, which I currently don’t need. Active tab seems like it would work, but it doesn’t provide the tab id and isn’t enabled by opening an option dialog (source).
(Why do I want the page action on my options page? The extension works with a website that is only available ~7-10 weeks per year. I’d like my users to be able to interact with the extension the rest of the time, so that they can get used to the process. But I don’t want to adjust the displayed extension permissions just to do so. I can accomplish this by having the options page pretend to be the website in question.)

Record Browser Actions

I am looking for some browser recording software which can record browser actions for one of the business application and give the html elements :- name/id/xpath of the element along with the action performed (ex click, send keys, javascript etc)
My "application under test" is specific to IE and it doesn't run in any other browser.
Try using Selenium. It allows you to record browser actions and save them for later use (like automated browser testing).
You may want to try using SeleniumRC if you want to do this for Internet Explorer. You'll still have to set up some steps through firefox, but you should be able to run your tests on IE.
Try out contizee (www.contizee.com) which is a browser based plug in, easy record and playback and allows me to edit action paths e.g.
$("input#fk-top-search-box").val("HP COMPAQ");
form#fk-header-search-form>div.search-bar-wrap>div.search-bar>div.unit.search-bar-submit-wrap.size1of6>input.search-bar-submit.fk-font-13.fk-font-bold
We can customize according to our needs

Calling chrome.browserAction.setIcon from content script the way it is done in background script

I am making an extension for chrome. It fetches data from webpages and emails it via local email client. I have a toolbar button which user has to click to invoke the script.
My script works for a few selected urls. I want my toolbar button to change icon based on whether the url is among our list or not. For example for site1 it should be redicon.png and for site2 it should be blueicon.png. I can change button icon using chrome.browserAction.setIcon. But the problem is that this API does not work in content script. It works fine in the background.js file but not in content.js. Kindly tell me how to achieve this.
I know using pageAction instead would do the trick but my client requirement is that the toolbar icon should change rather than appear and disappear.
What you need to read about is message passing. You are right, content scripts have limited chrome API. However, you can contact background page from content script and tell it to execute anything from chrome API for you. First, you need to create a listener on a background page that will be waiting for messages and then send a message from a content script.

Resources