Custom Chrome URL suggestions - google-chrome

One of the neat things about Chrome is that, if you type a word on the address bar, it suggests what relevant URLs might be. For example if I type "New York", it suggests nytimes.com
Can an extension be developed that provides customized suggestions? For instance, if I have an internal company website, say foo which hosts documents with numeric IDs - say http://domain.com/123 or http://domain.com/234. When someone types "123" on the browser address bar, I want http://domain.com/123 to show as a suggestion (even if it has never been accessed before).
Is something like this possible? If so, I would love some pointers (I've never developed a Chrome extension, but if possible, I can look things up and get this implemented).
Thanks!
Raj

Yes, it is possible through Omnibox, https://developer.chrome.com/extensions/omnibox.html
I have written a sample implementation here :
Manifest File:
{
"name": "Omnibox Demo",
"description" : "This is used for demonstrating Omnibox",
"version": "1",
"background": {
"scripts": ["background.js"]
},
"omnibox": {
"keyword" : "demo"
},
"manifest_version": 2
}
JS File:
chrome.omnibox.setDefaultSuggestion({"description":"Search %s in Dev Source Code"});
chrome.omnibox.onInputStarted.addListener(function() {
console.log("Input Started");
});
chrome.omnibox.onInputCancelled.addListener(function() {
console.log("Input Cancelled");
});
chrome.omnibox.onInputEntered.addListener(function (text) {
console.log("Input Entered is " + text);
});
chrome.omnibox.onInputChanged.addListener(
function(text, suggest) {
console.log('inputChanged: ' + text);
suggest([
{content: text + " one", description: "the first one"},
{content: text + " number two", description: "the second entry"}
]);
});

Related

Huginn: Extract text from html tag using Website Agent css selector

I'm trying to understand how the web-scraping is done in Huginn but I cannot find proper documentation on the options available.
I'd like to extract the price of the Gold oz. from this website for example:
https://www.xe.com/currencyconverter/convert/?Amount=1&From=XAU&To=USD
For which I use a Huginn Website Agent with this code:
{
"expected_update_period_in_days": "2",
"url": "https://www.xe.com/currencyconverter/convert/?Amount=1&From=XAU&To=USD",
"type": "html",
"mode": "on_change",
"extract": {
"price": {
"css": ".converterresult-toAmount",
"value": "."
}
}
}
I got the css selector using SelectorGadget and I've tried multiple values like: ./node(), string(.), normalize-space(.), . , //text() and others, but I cannot find the way to extract the content of the span html tag that contains that value. Here the code of that section of the web:
<span class="converterresult-toAmount">1,730.35</span>
And what I want to extract is: 1,730.35
i got it working on another site.
i used "xpath" for it.
I used a different site because it wouldn't work on the one you posted.
But i hope this still helps someone.
{
"expected_update_period_in_days": "2",
"url": "https://walletinvestor.com/converter/xau/usd/1",
"type": "html",
"mode": "on_change",
"extract": {
"gold_in_dollar_price": {
"xpath": "/html/body/div[4]/div/div[3]/div[1]/h2/strong/span",
"value": "string(.)"
}
}
}
Here is how you get the XPath of any Element/Object on a website:
(i used Yandex Browser based on chrome for this)
Open the Developer Tools in the Browser (or right click and select "Inspect element code")
Select / Click with the Inspector on your Element/Object
You should now see something like:
<span class="converterresult-toAmount">1,730.35</span>
Right click on this and click: "copy" > "Copy XPath"
Im using Huginn since 2 Days so anyone feel free to tell me any faster way if there is any :)

Single Quotes in Emmet With VS Web Essentials

Is there a way how to force Visual Studio Web Essentials to insert single quotes instead of double quotes?
For instance so that div.col-xs-1 TAB produces <div class='col-xs-1'></div> instead of default <div class="col-xs-1"></div>?
I am using Visual Studio 2013 Update 4 with Web Essentials 2013 v. 2.5.3.
Not to be a johnny come lately, but I was having trouble getting this to work in VS code, and so I thought I would post a solution for anyone still having this problem. My solution was to go into settings (ctrl-,) > user settings > extensions > emmet and under preferences click "Edit in settings.json". There, I added this to the user settings:
"emmet.syntaxProfiles": {
"xml": {
"attr_quotes": "single"
},
"html": {
"attr_quotes": "single"
},
"js": {
"attr_quotes": "single",
"self_closing_tag": true
},
"jsx": {
"attr_quotes": "single",
"self_closing_tag": true
}
}
Where each language you can define settings for. This worked for me.
To get single quotes working with JSX you will need to update or create the syntaxProfiles.json in ~/emmet with the syntax profile. If ~/emmet does not exist create it.
The key is the file extension and the value is the name of the profile that extension will use.
So in ~/emmet/syntaxProfiles.json
/* 'js' will map files with .js extension to use the js profile*/
/* 'jsx' will map files with .jsx extension to also use the js profile*/
{
"js": "js",
"jsx": "js"
}
And in ~/emmet/profiles.json
/* create or add the 'js' profile */
{
"html": {
"attr_quotes": "double"
},
"js": {
"attr_quotes": "single",
"self_closing_tag": true
}
}
This should work for most editors but I have only tried in atom.
https://github.com/emmetio/emmet-atom/issues/68

Can you rename the "Option" label ? ( Chrome-Extension )

I tried this : https://developer.chrome.com/extensions/options.html and made an option page.
So a selection has been added under my extension icon with the name of Option.
My question is that is there a way to rename Option and change it something like Setting or some words in other languages ?
The "Options" label at chrome://extensions is automatically adapted to the user's language. Extensions cannot change the value of this label.
The value of the "Options" option at the dropdown menu at the extension's button cannot be customized either, but you can create a new context menu item under the button as of Chrome 38. E.g.
chrome.contextMenus.create({
id: 'show-settings', // or any other name
title: 'Settings',
contexts: ['page_action', 'browser_action']
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == 'show-settings') {
chrome.tabs.create({
url: chrome.runtime.getURL('settings.html')
});
}
});
I suggest to just stick to "Options" though, because users do already know what the option does. Consistency in UI/UX is important, imagine how you productive you'd be if every application had a different way of (e.g.) closing/quiting the application.
manifest.json to test the previous script:
{
"name": "Contextmenu on browserAction button",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Right-click to see a context menu"
},
"permissions": [
"contextMenus"
]
}
Easier way to trigger events.
chrome.contextMenus.create({
title: 'GitHub',
contexts: ['page_action'],
onclick: () => console.log('GitHub'),
});

missing or unreadable manifest.json chrome extension

I am having problems trying to create a simple personalized shortcut on the chrome's new tab page. Having no experience in the coding world, i followed the steps in this cool site.
http://www.howtogeek.com/169220/how-to-create-custom-chrome-web-app-shortcuts-for-your-favorite-websites/
The problem is that when loading the uncompressed extension, it mentions that it cannot find the manifest file or is unreadable.
{
“manifest_version”: 2,
“name”: “cnn“,
“description”: “cnn site“,
“version”: “1.0″,
“icons”: {
“128″: “128.png”
},
“app”: {
“urls”: [
"http://cnn.com/"
],
“launch”: {
“web_url”: “http://cnn.com/”
}
},
“permissions”: [
"unlimitedStorage",
"notifications"
]
}
Is it correct? Does it have anything to do with my chrome language set to portuguese? I have already created an 128.png image, and the notepad title is exacly "manifest.json"
Hope you can help, Cheers SRD
Your quotation marks don't look correct.
Instead of using “ and ”, use ".

How do I get a Chrome Extension PageAction icon to appear in the address bar?

I'm trying to build a Chrome Extension that appears as an icon in the address bar which, when clicked, sets contenteditable=true on all elements on the page, and then when clicked again sets them back to contenteditable=false.
However, I'm falling at the first hurdle... The icon isn't even showing up in the address bar.
Here's my manifest file:
{
"name": "Caret",
"version": "1.0",
"description": "Allows you to edit the content on any webpage",
"page_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery.js", "caret.js"]
}
],
"permissions" : [
"tabs"
]
}
and here's the caret.js script:
chrome.browserAction.onClicked.addListener(function(Tab) {
$("*").attr("contenteditable",true);
});
This is my first attempt at an extension, so it's quite probably a newbie mistake, but I'd really appreciate any help or advice!
Ok, turns out I needed to use chrome.pageAction.show(tab.id);, which meant I needed to get the ID of the current tab, which is achieved with:
chrome.tabs.getSelected(null, function(tab) {
chrome.pageAction.show(tab.id);
});
BUT it turns out you can't use chrome.tabs within a content script, so I had to switch to using a background page instead.
This is no longer possible as of last release.
Chrome extension page action appearing outside of address bar
https://groups.google.com/a/chromium.org/forum/#!searchin/chromium-extensions/upcoming/chromium-extensions/7As9MKhav5E/dNiZDoSCCQAJ
My answer to this other question gives the solution. FYI, the second code issue noted in that answer is also relevant to your code: You want the icon to appear for all pages, so you should use browser_action, not page_action. Either will work, but using a page action on every page goes against convention and makes for a less consistent end-user experience.
I had a similar problem, here are the steps I followed to solve it:
I altered my manifest.json to include the following:
{
"background": {
"scripts": ["background.js"],
"persistent":false
},
"page_action": {
"default_icon": "logo.png",
"default_title": "onhover title",
"default_popup": "popup.html"
}
}
Then I inserted the following code into my background script:
// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when on website and has class
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'myurl', schemes: ['https', 'http'] },
css: [".cssClass"]
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
The documentation for this can be found here... https://developer.chrome.com/extensions/declarativeContent
I did this:
chrome.tabs.onUpdated.addListener(function(id, info, tab){
if (tab.url.toLowerCase().indexOf("contratado.me") > -1){
chrome.pageAction.show(tab.id);
}
});