高品質な・迅速な・安心できるベトナム語翻訳

言語プロフェッショナルによる高品質なベトナム語翻訳
DỊCH VĂN BẢN TÀI LIỆU KHÓ CHUYÊN MÔN CAO TIẾNG NHẬT * VIETNAMESE ENGLISH HIGH QUALITY TRANSLATION * DICTIONARY AND LANGUAGE TOOL DEVELOPMENT

Thursday, February 14, 2019

[Diary] Add Chrome right-click context menu for my online dictionary

(See the simplest way to add right-click menu to look up in customized dictionaries below - no need to code)

I want to add a right-click context menu in Chrome browser to search a selected word or phrase in my online dictionary, for example:

https://my.meonn.com/look.php?mylook=XXX
(This dictionary is for test only, not a practical one)

When I selected a word XXX in Chrome and right-click it, there will be an option to look up it in my online dictionary (URL above).

It's like 'Search Google for "XXX"' in this picture:


So I follow this tutorial Can I add right-click options in Google Chrome? to:
- Create a manifest file call "manifest.json"
- Create a html file call "yurica.html" (function script)
- Create icon files: "icon16.png" and "icon48.png"

"manifest.json"
{
   "manifest_version": 2,
   "background": "yurica.html",
   "description": "Add a context menu item to look up selected text at Yurica Dictionary.",
   "icons": {
      "16": "icon16.png",
      "48": "icon48.png"
   },
   "minimum_chrome_version": "6",
   "name": "Yurica Right Click",
   "permissions": [ "contextMenus", "tabs" ],
   "version": "1.0"
}

"yurica.html"
<script>
function lookupyurica(info)
{
 var searchstring = info.selectionText;
 chrome.tabs.create({url: "https://my.meonn.com/look.php?mylook=" + searchstring})
}
chrome.contextMenus.create({title: "Look up in Yurica Dictionary", contexts:["selection"], onclick: lookupyurica});
</script>
I put in same folder and do this step:
Put the icons, background.html, and manifest.json in a folder together, then go to the extensions management page at chrome://extensions, look under Developer mode (I think you need to be running the beta channel or higher for this to show up), click on Pack extension…, next to Extension root directory click Browse…, locate and select the folder you made, click OK, and drag the resulting .crx file into your Google Chrome window.

However this error happens:
Pack extension error
A private key for specified extension already exists. Reuse that key or delete it first.
So I search the Internet and find this solution I cant pack my Chrome extensions when I try it says failed to output private key.
You must just zip it (compress the file). And upload this ZIP file to the Chrome Web Store.
Chrome Web Store will provide you with the private key.
If you upload for the first time this ZIP file (-> first time you upload your Chrome extension), the Chrome Web Store will create a ID number for your Chrome extension.
What to compress?
1. Open the folder where you see the "manifest.json" file.
2. Select all the files -> and compress this to a ZIP file.
3. And upload this ZIP to the Chrome Web Store Dashboard:
https://chrome.google.com/webstore/developer/dashboard
Looks like this:


Finally, I could create .crx file and add to Chrome extensions. But since I haven't published it yet, Chrome automatically disable my extension and I couldn't enable to use it.

In Chrome's Developer Dashboard, it says:
A one-time developer registration fee of US$5.00 is required to verify your account and publish items. [Pay this fee now]  - Learn more
Learn more:
Developer dashboard > Developer Registration
Before you publish your first item, you must pay a one-time US$5.00 developer registration fee. We charge this fee in order to verify developer accounts and better protect users against fraudulent activity.
Once you have paid the registration fee you can publish up to 20 items.
We use Google Payments to process the US$5.00 payment. We'll ask you to provide your billing information if you haven't used Google Payments before.
So I decided to use available extension and customize it to use with my dictionary.

Another easy and concrete tutorial: How to Create and Publish a Chrome Extension in 20 minutes

Simplest available way (no need to code)

Using the Chrome extention Custom Right-Click Menu written by Sander Ronde.
Here's the steps:

1. Install "Custom Right-Click Menu" from the Chrome Store (from above URL)
Its icon will appear in Chrome browser (at the end of address bar):


2. Open the Options for Custom Right-Click Menu


3. In the Editing the CRM section, I changed root node name from "Right-Click Menu" to "Look Up" and add a node call "Yurica dictionary":


Click to edit this node:


The information (i) says:
Any occurrence of %s in a link will be replaced by the currently selected text on the page
So I change Link to: https://my.meonn.com/look.php?mylook=%s

(This is a dictionary for test only, not my daily using one.)

Next, I test with some selected text in Chrome:


It works like a charm:


Now I can add as many dictionaries as I want. Here's the result:


For Google search with keyword "とは 意味 の英語" (to delete unnecessary ones later) I use this URL:
https://www.google.com/search?q=%s%20とは%20意味%20の英語
Just replaced spaces with %20 (space character for URLs). Do the same with Google search for Vietnamese words:
https://www.google.com/search?q=%s%20tiếng%20Anh%20nghĩa%20là

My full list of dictionaries for Custom Right-Click Menu extension in Chrome:
Yurica Dictionary | https://my.meonn.com/tran.php?mylook=%s
英辞郎 | https://eow.alc.co.jp/search?q=%s
Weblio英和 | https://ejje.weblio.jp/content/%s
Weblio国語 | https://www.weblio.jp/content/%s
Google翻訳(JV) | https://translate.google.com/#ja/vi/%s
Kotobank国語 | https://kotobank.jp/word/%s
Google とは 意味 の英語 | https://www.google.com/search?q=%s%20とは%20意味%20の英語
Google tiếng Anh nghĩa là | https://www.google.com/search?q=%s%20tiếng%20Anh%20nghĩa%20là
Mark T.

No comments:

Post a Comment