Create an extension for chrome context menu word selection

When surfing the internet, you often switch between multiple search engines. However, it is troublesome to switch between search engines that come with chrome. You need to configure one configuration for another engine, therefore, I also found multiple search extensions in the chrome app store. They all have their own advantages, but they cannot provide the functions I want at the same time ,... syntaxHighlighter. all (); when surfing the Internet, it is often difficult to switch between multiple search engines, but it is difficult to switch between search engines that come with chrome. You need to set a configuration for another engine, therefore, I also found multiple search extensions in the chrome app store. They all have their own advantages, but they cannot have the functions I want at the same time, for example, menu item grouping, word search, Custom Search addition, or synchronization Configuration between different computers are all a little lacking. Therefore, you can choose to implement a shortcut menu extension program by yourself, the basic features are as follows: Right-click the Search page and select the word Search menu group to display the custom add Search engine synchronization configuration chrome app mall extension address. You are welcome to install the trial: Context Search extension: next, let's introduce code implementation. In chrome context menu, add custom menu items and use chrome. contextMenus. create to create a context menu. 1) Create the main menu item [javascript] var context = "selection"; var id = chrome. contextMenus. create ({"title": J. NAME, "id": "c" + context, "contexts": [context]}); "title": menu item display title "id": menu id "contexts ": set the operation content corresponding to the menu. You can set one or more items: ["all", "page", "frame", "selection", "link", "editable ", "image", "video", "audio"] This extension uses "selection", that is, the selected text. This menu item does not respond to Operation events. 2) create a group menu [javascript] catalogId = chrome. contextMenus. create ({"title": catalog, "id": "c" + catalog, "contexts": [context], "parentId": id}); parentId: A "parentId" parameter is added in comparison to the method used to create the main menu, indicating the id of the parent menu item, that is, the id of the main menu item. This menu item does not respond to Operation events. 3) create a sub-menu item [javascript] chrome. contextMenus. create ({"title": J. SEARCHENGINES [I]. ID, "id": I. toString (), "contexts": [context], "parentId": catalogId, "enabled": J. SEARCHENGINES [I]. ENABLE, "onclick": onClickMenu}); "enabled": indicates whether the menu item is available; "onclick": indicates the click event processing function of the menu item, when this sub-menu item is clicked, The onClickMenu () function is called. 2. You need to load context. js when loading a page to add a mouse operation listener. Monitor the page by clicking the left mouse button. When the left mouse button mouseup event is generated, the search menu is displayed. [Javascript] document. addEventListener ("mouseup", function (){... // only the left mouse button is processed. if a menu exists when another key is pressed, the menu if (event. button! = 0) {if (searchMenu) {document. body. removeChild (searchMenu);} return ;}... // read the configuration and create the menu chrome. extension. sendRequest ({cmd: 'Get _ options'}, function (opts) {createSearchMenu (opts, x, y) ;}); menu is dynamically created. 3. configuration of menu group extensions in JSON format: {"CATALOG": "", "ID": "Google (Security)", "URL ":" https://www.google.com.hk/search?q=%s "," ENCODE ": false," ENABLE ": true} specifies the menu Group of the CATALOG type, which includes the following items: Empty characters: Do not group, which are directly subitems of the main menu ;-: indicates the menu separator; string: indicates the group name; 4. Use sync to synchronize the configuration to the server. You need to log on to the gmail account for synchronization. In addition, if the length of the configuration exceeds the QUOTA_BYTES_PER_ITEM limit, you need to save the configuration in multiple parts. [Javascript] var Storage = chrome. storage. sync; // Save the configuration to Storage. multipart Storage is required if QUOTA_BYTES_PER_ITEM is exceeded. Function setOptions (opts, cb) {var optionStr = JSON. stringify (opts); var length = optionStr. length; var sliceLength = Storage. QUOTA_BYTES_PER_ITEM/2; // you can set the maximum length of each slice to ensure that var optionSlices ={}; // Save the slice data var I = 0; // part number // while (length> 0) {optionSlices ["cs_options _" + I] = optionStr. substr (I * sliceLength, sliceLength); length-= sliceLength; I ++ ;}// Number of saved parts optionSlices ["cs_options_num"] = I; // write to Storage. set (optionSlices, cb); // console. log (optionSlices );}