I would like to know if the following is possible - I'm having trouble finding information regarding my question on the web. I was looking into creating a Google Chrome extension to work with a webpage, until I realized that the page was in fact built with flash. Originally I wanted to bind an onClick event for an input on the webpage to display a form (which would be through the extension I'm building).
However, because the page is build in flash I no longer believe that this will be a possibility. So, my next idea was to bind the form's loading to a certain combination of keys (ctrl + d) for example, that the user would click.
For example:
The user is using the flash form with my extension running in the background. The user focuses on an input (text box let's say) and proceeds to click the keys (Ctrl + D). Upon clicking these keys, my extension pops open a web-form. The user types in what he wants in the form and then clicks "Save" - A submit button on my web-form. When the user clicks 'save', the data from the web-form is stored in the clipboard and the form closes. Finally, the focused input is filled in with the data from the clipboard.
Two questions:
Do Google Chrome extensions support key binding like this?
Will I be able to copy input from my generated form (through the extension) and paste it back into the input field on the flash page?
1. Do Google Chrome extensions support key binding like this?
Yes, you can specify custom key board shortcuts catered to platform using chrome.commands API.
You can directly trigger browser action\page action popup page or do any customized functionality by defining a key.
Sample Code of manifest
{
"sample": {
"suggested_key": {
"default": "Ctrl+Shift+S",
"windows": "Ctrl+Shift+P"
},
"description": "Thisismycustomkeyforchromeextension"
},
"_execute_browser_action": {
"suggested_key": {
"windows": "Ctrl+Shift+Y",
"mac": "Command+Shift+Y",
"chromeos": "Ctrl+Shift+U",
"linux": "Ctrl+Shift+J"
}
}
}
However, maximum of 4 keys are supported so far! For further information refer this answer
2. Will I be able to copy input from my generated form (through the extension) and paste it back into the input field on the flash page?
Yes, with combination of content scripts and message passing it is possible.
References
Content Scripts
Background Pages
Message Passing
Commands API
Related
Right now I developing a product based on Chromium extension which monitors user actions by taking screenshots on several DOM events, such as mouse "click". I using chrome.tabs.captureVisibleTab API for doing that.
The problem: if user makes a click on tab "A" content and then very fast choosing another tab "B" - captureVisibleTab takes screenshot of currently visible tab "B" (instead of tab "A", where action happened).
This is because it take some time while "click" message passing from content script to background (asynchronously) and screenshot taken (also asynchronously) and during that time another tab already activated.
One possible solution I had been thinking is instead of using "captureVisibleTab" - use some another capture API which takes tab id as an argument - but I cannot find such API.
Any ideas?
I wrote a contextual menu-based Chrome extension. It allows me to save a music track being played by the radio as a favorite. I want this menu item to be available only when a tab with a specific matching URL of the radio player is open anywhere (doesn't have to be active or currentWindow). Obviously, the menu item should also be hidden from the menu when this radio player has closed.
documentUrlPatterns on a menu item doesn't work that way - it only shows the item on the matching pages. My goal is to be able to save the favorite without having to switch to the radio tab first.
My guess is that I should listen to tabs.onCreated/onUpdated/onRemoved with the player's url. Perhaps also to onReplaced. But is there a better, more "lazy" way to achieve that?
Use webNavigation API with event filters for the URL. Event filters are registered inside Chrome itself so it wakes up the background script with "persistent": false only when the filter is matching. Note that filters use different syntax, not like normal matching patterns, as you can see in the example below and in each event's documentation.
const filters = {
url: [{
hostEquals: 'www.example.com',
queryContains: 'foo=bar',
}]
};
chrome.webNavigation.onCompleted.addListener(onNavigation, filters);
chrome.webNavigation.onHistoryStateUpdated.addListener(onNavigation, filters);
chrome.webNavigation.onReferenceFragmentUpdated.addListener(onNavigation, filters);
function onNavigation(info) {
console.log(info);
// modify your context menu here
}
manifest.json's should of course have "permissions": ["webNavigation"]
I have a Chrome extension with a popup that can also be opened by a shortcut. When the popup gets opened, can I find out whether the user has used the shortcut or whether they have clicked on the extension icon?
The reason is that I'd like to hint users to use the shortcut, but I don't want to show that hint to users who already know and use the shortcut.
Popup and shortcut are defined like this in manifest.json:
"browser_action": {
"default_icon": "images/icon48.png",
"default_popup": "popup.html",
"default_title": "__MSG_tooltip__"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+Space"
}
}
},
chrome.browserAction.onClicked.addListener
Not available, because:
Fired when a browser action icon is clicked. This event will not fire
if the browser action has a popup.
We has popup.
chrome.commands.onCommand.addListener
Not available, because:
The '_execute_browser_action' and '_execute_page_action' commands are
reserved for the action of opening your extension's popups. They won't
normally generate events that you can handle.
May try inject press listener to some page and track pressed of keys (on each page).
var isPressed;
document.body.addEventListener("keydown", function (e) {
if (!(e.keyCode != 17) || !(e.keyCode != 16) || !(e.keyCode != 32)) return;
isPressed = true;
});
From popup in moment expand send message to content_scripts:
chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, {action: "isPressed"}, function (responce) {
if (responce) {
}
});
});
After message receiving, listener in content scripts send variable isPressed as response:
chrome.runtime.onMessage.addListener(function (message, sender, response) {
if (message.action == "isPressed") {
response(isPressed);
}
});
If variable is true, means called via keystrokes, else on click on icon.
can I find out whether the user has used the shortcut or whether they
have clicked on the extension icon?
There seems to be no clean direct way of detecting that.
Since I put some effort into trying to find a workaround, I would like to share what I have considered/tried and reasons why it doesn't work:
Attach the keyboard shortcut to some custom command, modify popup page and then open it programmatically.
Doesn't work because there is no way to open the popup programmatically, at least not in current stable version of Chrome (v50).
Create a custom command with the same shortcut as "_execute_browser_action" and use it to send a message to the popup.
Doesn't work because two commands cannot share the same shortcut.
Try to capture keyup in the popup page immediately after loading.
I tested this and it seemed to work at first, but it is definitely not reliable. If the user only presses the keyboard shortcut very briefly, the keyup event is fired before the popup page gets a chance to register a listener for it.
Capture keydown on pages using a content script and then send a message to the popup page to let it know that the keyboard shortcut was pressed (as suggested by UserName above).
This should work on most pages, but the content script won't be able to capture the keypress in address bar and on certain pages (chrome://, chrome-extension://).
Difficult to implement because you need to take into account the fact that users can customize the shortcut on chrome://extensions page. Finding the currently assigned shortcut programmatically to test against it in the content script is surprisingly difficult, because chrome.commands.getAll() provides localized key names (eg. "Ctrl+Shift+Space" in English, but "Ctrl+Shift+Mezera" in Czech) There are languages where even Ctrl and Shift don't stay in English.
I'm working on a chrome extension that manipulates certain cookies. Most of the manipulation takes place in the background service, but I need to update the icon and pass data to the browser action for the current tab.
I'm looking for an action similar to the AdBlock extension. AdBlock loads a small number in the bottom right of the icon for the number of ads blocked, so it varies from tab to tab.
When I perform this action from the background service, it seems to change across all browsing tabs. Can someone with experience in extensions point me in the right direction for this one?
This should get you started.
setInterval(function(){//every second
chrome.tabs.getSelected(null,function(tab) {//on the current tab,
chrome.browserAction.getBadgeText({tabId:tab.id}, function(badgeText){//get the tab's badge text
if(badgeText.length<1){
badgeText="0";//set the text if its empty
}
chrome.browserAction.setBadgeText({tabId:tab.id,text:badgeText/1+1+""});//and add one.
});
});
},1000);
make sure you don't run this in the console, because chrome will get the developer tool window id, and since no valid tab has that id, it will change every single tab's badgeText.
You just need to include the tab id when you set it, such as:
chrome.browserAction.setBadgeText({ text: "5", tabId: tab.id })
I'm trying to create a google chrome extension (I'm almost a newb at programming, although I understand the basics, somewhat) that will search a video streaming site for the title that you enter. The site is somewhat slow, and going through a page or two to get to the sites' search bar can be a pain. I would (for now) like this extension to tie into the sites' existing search url. Here is part of the URL. When you leave the search field blank and search, this is the resulting URL
anisrch_title=&op=srch&anisrch_cat=
When you actually search for something, it simply inserts the search term as follows:
anisrch_title=(SEARCH TERM HERE WITHOUT PARENTHESES)&op=srch&anisrch_cat=
As I mentioned before, I am a programming newbie, and am unfamiliar with all sorts of programming techniques. How would I go about making an extension that redirects you to the URL + the search term inserted into the appropriate place?
For example, upon clicking the extension Icon, a pop-up appears with a text field and a "Go" button.
Textfield input = SearchTitle
And upon clicking the "Go" button, the extension redirects you to the full link of:
anisrch_title=(SearchTitle)&op=srch&anisrch_cat=
Please be patient with me, as I am a newbie at coding and I am still learning. The site I am making this for is strained by heavy load, and insufficient server resources. Could someone please walk me through this?
For example, upon clicking the extension Icon, a pop-up appears with a
text field and a "Go" button. Textfield input = SearchTitle
Use a browser action (https://developer.chrome.com/trunk/extensions/browserAction.html). The popup of a browser action can be a html page. Just put your text field, go button, etc in popup.html.
And upon clicking the "Go" button, the extension redirects you to the
full link of: anisrch_title=(SearchTitle)&op=srch&anisrch_cat=
redirect? Did you mean opening the search page in the current tab? If that is the case, use chrome.tabs.update (https://developer.chrome.com/extensions/tabs.html#method-update) in your handler of onclick for the button (say your button id is go and text field id is query). Because of CSP (https://developer.chrome.com/trunk/extensions/contentSecurityPolicy.html), you must place your JavaScript code in a separate popup.js and refer to it in your popup.html.
document.getElementById('go').addEventListener('click', function() {
chrome.tabs.update({url: 'http://yoursite.com/path?anisrch_title=' + document.getElementById('query')'&op=srch&anisrch_cat='});
});
If you prefer opening a new tab, use chrome.tabs.create instead.
If you're not familiar with basics of Chrome extensions, the Getting Started tutorial will help you much: https://developer.chrome.com/extensions/getstarted.html.