├── 128.png ├── README.md ├── background.js ├── main.css ├── manifest.json ├── option.html ├── option.js ├── popup.html └── popup.js /128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryankeep/dream_search/383fb2f2d92b1aef9677e23b9506c5fcba3ff281/128.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 梦想综合搜索 (Chrome & Firefox 扩展) 2 | 一款简洁的综合搜索扩展，可自定义右键搜索和搜索按钮。 3 | 4 | ### 功能介绍 5 | 1、在地址栏旁添加了功能图标，点击图标可展示综合搜索窗口。 6 | 7 | 2、浏览网页时，选中您想搜索的文字，点击鼠标右键，可通过右键菜单可快速搜索。 8 | 9 | 3、可通过设置自定义右键搜索菜单和搜索窗口按钮。 10 | 11 | 4、默认支持百度、谷歌、必应、360、搜狗、维基百科和百度百科搜索。 12 | -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | let searchDefault = `百度搜索|https://www.baidu.com/s?wd={0} 4 | 谷歌搜索|https://www.google.com/search?q={0} 5 | 必应搜索|https://cn.bing.com/search?q={0} 6 | 360搜索|https://www.so.com/s?q={0} 7 | 搜狗搜索|https://www.sogou.com/web?query={0} 8 | 维基百科|https://zh.wikipedia.org/w/index.php?search={0} 9 | 百度百科|https://baike.baidu.com/search/word?word={0}` 10 | let menuDefault = `百度搜索|https://www.baidu.com/s?wd={0}` 11 | let widthDefault = 640 12 | 13 | let l = localStorage 14 | var menuList, searchList, searchWidth, searchText 15 | init() 16 | 17 | String.prototype.format = function () { 18 | let args = arguments 19 | return this.replace(/{(\d+)}/g, function (match, number) { 20 | return typeof args[number] != 'undefined' ? args[number] : match 21 | }) 22 | } 23 | 24 | function init() { 25 | l.menuText = l.menuText || menuDefault 26 | l.searchText = l.searchText || searchDefault 27 | l.searchWidth = l.searchWidth || widthDefault 28 | initVal() 29 | } 30 | 31 | function initVal() { 32 | menuList = optionFormat(l.menuText) 33 | searchList = optionFormat(l.searchText) 34 | searchWidth = l.searchWidth 35 | initMenu(menuList) 36 | } 37 | 38 | function saveOption(options) { 39 | l.menuText = options.menuText || menuDefault 40 | l.searchText = options.searchText || searchDefault 41 | l.selectAll = options.selectAll || false 42 | 43 | let w = options.searchWidth 44 | l.searchWidth = w ? w < 360 ? 360 : w > 760 ? 760 : w : widthDefault 45 | initVal() 46 | } 47 | 48 | function optionFormat(s) { 49 | let r = [] 50 | s = s.trim() 51 | if (!s) return r 52 | 53 | let arr = s.split('\n') 54 | arr.forEach((v, k) => { 55 | v = v.trim() 56 | if (!v) return 57 | let [name, url] = v.split('|') 58 | name = name.trim() 59 | url = url.trim() 60 | if (name && url) r.push({key: k, title: name, url: url}) 61 | }) 62 | return r 63 | } 64 | 65 | function initMenu(menuList) { 66 | chrome.contextMenus.removeAll() 67 | setTimeout(() => { 68 | menuList.forEach(v => { 69 | addMenu(v) 70 | }) 71 | }, 300) 72 | } 73 | 74 | function addMenu(v) { 75 | let create = chrome.contextMenus.create 76 | // create({id: "separator1", type: "separator", contexts: ['selection']}) 77 | create({ 78 | id: v.key + '_page', 79 | title: v.title + '首页', 80 | contexts: ['page'], 81 | onclick: function () { 82 | chrome.tabs.create({url: (new URL(v.url)).origin}) 83 | } 84 | }) 85 | create({ 86 | id: v.key + '_selection', 87 | title: v.title + '“%s”', 88 | contexts: ['selection'], 89 | onclick: function (info) { 90 | chrome.tabs.create({url: v.url.format(decodeURL(info.selectionText))}) 91 | } 92 | }) 93 | } 94 | 95 | function decodeURL(s) { 96 | s = decodeURIComponent(s) 97 | s = s.replace(/#/g, '%23') 98 | s = s.replace(/&/g, '%26') 99 | return s 100 | } 101 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | html, body, p, h1, h2, h3, h4, h5, h6 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | padding: 10px; 8 | background: #F1F4F6; 9 | font-size: 16px; 10 | line-height: 1.8; 11 | user-select: none; 12 | } 13 | 14 | .fx:after { 15 | display: block; 16 | content: ''; 17 | clear: both; 18 | } 19 | 20 | .box { 21 | margin-bottom: 10px; 22 | width: 230px; 23 | } 24 | 25 | .mt_1 { 26 | margin-top: 10px; 27 | } 28 | 29 | .main { 30 | width: 100%; 31 | max-width: 1000px; 32 | margin: 0 auto; 33 | } 34 | 35 | .search_main { 36 | width: 360px; 37 | } 38 | 39 | .dmx_input { 40 | background: #ffffff; 41 | border: 1px solid #cfd0d2; 42 | border-radius: 8px; 43 | color: #4e5053; 44 | padding: 3px 8px; 45 | line-height: 30px; 46 | font-size: 16px; 47 | transition: all .2s linear; 48 | } 49 | 50 | .dmx_input:hover { 51 | border-color: #409eff; 52 | box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); 53 | /*transform: scale(1.005);*/ 54 | } 55 | 56 | .search_box { 57 | position: relative; 58 | height: 30px; 59 | padding: 3px 63px 3px 8px; 60 | } 61 | 62 | .search_box > input { 63 | display: block; 64 | width: 100%; 65 | height: 28px; 66 | font-size: 18px; 67 | outline: none; 68 | border: none; 69 | } 70 | 71 | #search_remove { 72 | position: absolute; 73 | top: calc(50% - 15px); 74 | width: 30px; 75 | height: 30px; 76 | background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M866.016 740.992q28.992 30.016 42.496 55.008T904 852.992q-4 6.016-11.008 14.496T878.496 884t-15.008 14.496T850.976 908q-24.992 15.008-59.008 8t-60.992-34.016l-236-236-128 128q-59.008 59.008-96 96.992-38.016 38.016-75.488 47.008t-66.496-16.992L100 872q-6.016-6.016-7.008-8Q81.984 849.984 80 835.488t2.496-28.512T96 779.968t20-24q8.992-8 32-30.016l54.016-56q32.992-32 73.504-72t84.512-84q-48-48-91.488-91.008t-78.016-76.992-56.512-55.488-27.008-26.496q-26.016-26.016-26.496-51.488t17.504-51.488q8-10.016 23.008-23.488T142.016 120q30.016-20 54.016-17.504t48 27.488l31.008 31.008q23.008 23.008 56.992 56t76.512 74.496 88.512 86.496q38.016-38.016 74.496-74.016t68-67.488 56.992-56.512 42.496-42.016q24-23.008 52-30.496t54.016 12.512q.992.992 6.496 4.992t11.008 8.992 10.496 9.504 7.008 5.504q27.008 26.016 26.496 56.512t-26.496 56.512Q862.048 280 835.552 306.976t-59.008 59.008-68.512 68l-76 76q36.992 36 72.512 70.496t66.016 64.512T825.568 700t40.512 40.992z'/%3E%3C/svg%3E") no-repeat center; 77 | right: 35px; 78 | opacity: .6; 79 | cursor: pointer; 80 | } 81 | 82 | #search_remove:hover { 83 | opacity: 1; 84 | } 85 | 86 | #search_but { 87 | position: absolute; 88 | top: calc(50% - 15px); 89 | width: 30px; 90 | height: 30px; 91 | background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M946.222 844.994L727.729 624.668c-2.543-2.549-5.353-4.496-8.036-6.617 36.908-57.103 58.459-125.121 58.459-198.387 0-201.282-161.79-364.428-361.498-364.428-199.596 0-361.498 163.146-361.498 364.428 0 201.31 161.902 364.42 361.498 364.42 72.648 0 140.196-21.784 196.926-58.999 2.066 2.768 3.961 5.521 6.463 8.05l218.521 220.353c14.919 14.997 34.35 22.472 53.809 22.472 19.472 0 38.916-7.474 53.822-22.436 29.684-29.996 29.684-78.557.027-108.53M416.654 669.007c-136.347 0-247.334-111.872-247.334-249.343 0-137.45 110.988-249.351 247.334-249.351s247.334 111.901 247.334 249.351c.001 137.47-110.988 249.343-247.334 249.343'/%3E%3C/svg%3E") no-repeat center; 92 | right: 10px; 93 | opacity: .6; 94 | cursor: pointer; 95 | } 96 | 97 | #search_but:hover { 98 | opacity: 1; 99 | } 100 | 101 | .dmx_button { 102 | display: inline-block; 103 | float: left; 104 | background: #4395ff; 105 | border: 1px solid #3589ff; 106 | border-radius: 4px; 107 | color: #fff; 108 | line-height: 1; 109 | padding: 8px 12px; 110 | font-size: 14px; 111 | white-space: nowrap; 112 | text-align: center; 113 | outline: none; 114 | box-sizing: border-box; 115 | user-select: none; 116 | cursor: pointer; 117 | opacity: .9; 118 | transition: .1s; 119 | } 120 | 121 | .dmx_button:hover { 122 | opacity: 1; 123 | box-shadow: 0 2px 5px 0 #7b7f84; 124 | } 125 | 126 | .dmx_button:active { 127 | opacity: .8; 128 | } 129 | 130 | .dmx_button_default { 131 | background: #fff; 132 | border: 1px solid #dcdfe6; 133 | color: #606266; 134 | } 135 | 136 | .but_box { 137 | width: calc(100% + 10px); 138 | margin-left: -10px; 139 | } 140 | 141 | .but_box .dmx_button { 142 | margin: 10px 0 0 10px; 143 | } 144 | 145 | /* ============ option ============ */ 146 | .option { 147 | margin-bottom: 10px; 148 | } 149 | 150 | .option .title { 151 | position: relative; 152 | } 153 | 154 | .option .title:after { 155 | position: absolute; 156 | top: 50%; 157 | display: block; 158 | content: ''; 159 | width: 100%; 160 | border-bottom: 1px solid #b9b9b9; 161 | } 162 | 163 | .option b { 164 | z-index: 1; 165 | position: relative; 166 | background: #F1F4F6; 167 | padding-right: 5px; 168 | } 169 | 170 | .case { 171 | display: flex; 172 | align-items: center; 173 | } 174 | 175 | .case input[type=checkbox] { 176 | margin-right: 6px; 177 | } 178 | 179 | .case .dmx_input { 180 | display: block; 181 | width: 100%; 182 | box-sizing: border-box; 183 | resize: vertical; 184 | } 185 | 186 | .case .show_width { 187 | width: 90px; 188 | } 189 | 190 | .option_but { 191 | margin: 20px 0; 192 | } 193 | 194 | #reset_option { 195 | margin-left: 10px 196 | } 197 | 198 | .explain { 199 | color: #b3b3b3; 200 | } 201 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "梦想综合搜索", 3 | "description": "一款简洁的综合搜索扩展，可自定义右键搜索和搜索按钮。", 4 | "version": "1.13", 5 | "manifest_version": 2, 6 | "icons": { 7 | "128": "128.png" 8 | }, 9 | "background": { 10 | "scripts": [ 11 | "background.js" 12 | ] 13 | }, 14 | "browser_action": { 15 | "default_popup": "popup.html", 16 | "default_title": "梦想综合搜索", 17 | "default_icon": "128.png" 18 | }, 19 | "options_ui": { 20 | "page": "option.html", 21 | "open_in_tab": true 22 | }, 23 | "permissions": [ 24 | "contextMenus" 25 | ], 26 | "homepage_url": "https://github.com/ryanker/dream_search", 27 | "commands": { 28 | "_execute_browser_action": { 29 | "suggested_key": { 30 | "default": "Ctrl+Shift+S", 31 | "mac": "MacCtrl+Shift+S" 32 | }, 33 | "description": "打开设置" 34 | } 35 | } 36 | } 37 | 38 | 39 | -------------------------------------------------------------------------------- /option.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 设置 6 | 7 | 8 | 9 |
10 |
11 |
启用搜索
12 |
13 | 14 |
15 |
16 |
17 |
右键菜单
18 |
19 | 20 |
21 |
22 |
23 |
显示宽度
24 |
25 | 26 |
27 |
28 |
29 |
其他设置
30 |
31 | 32 | 打开搜索面板时，自动全选 33 |
34 |
35 |
36 |
保存设置
37 |
恢复默认
38 |
39 |
40 |
设置说明
41 |
42 | 1、每行一条，“|”分隔，前面为名称，后面为搜索链接，{0} 代表搜索关键。
43 | 2、排列顺序和放置顺序一致，第一排为第一个，第二排为第二个，以此类推。
44 | 3、右键菜单，如果为多条，自动变成二级菜单。建议设置最常用的即可，太多了混乱。 45 |
46 |
47 |
48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /option.js: -------------------------------------------------------------------------------- 1 | let bg = chrome.extension.getBackgroundPage() 2 | 3 | let nameEl = document.querySelectorAll('[name]') 4 | let widthEl = document.querySelector('input[name="searchWidth"]') 5 | let saveEl = document.getElementById('save_option') 6 | let resetEl = document.getElementById('reset_option') 7 | 8 | // 加载 9 | nameEl.forEach(el => { 10 | let val = localStorage[el.name] || '' 11 | if (el.type === 'checkbox') { 12 | if (val === 'true') el.checked = true 13 | } else { 14 | el.value = val.trim() 15 | } 16 | }) 17 | 18 | widthEl.onchange = function () { 19 | let w = this.value 20 | this.value = w < 360 ? 360 : w > 760 ? 760 : w 21 | } 22 | 23 | // 保存 24 | saveEl.onclick = function () { 25 | let obj = {} 26 | nameEl.forEach(el => { 27 | if (el.type === 'checkbox') { 28 | obj[el.name] = el.checked 29 | } else { 30 | obj[el.name] = el.value.trim() 31 | } 32 | }) 33 | bg.saveOption(obj) 34 | setTimeout(() => { 35 | location.reload() 36 | }, 300) 37 | } 38 | 39 | // 重置 40 | resetEl.onclick = function () { 41 | let obj = {} 42 | nameEl.forEach(el => { 43 | obj[el.name] = '' 44 | }) 45 | bg.saveOption(obj) 46 | setTimeout(() => { 47 | location.reload() 48 | }, 300) 49 | } 50 | -------------------------------------------------------------------------------- /popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Popup 6 | 7 | 8 | 9 |
10 |
11 | 12 |
13 |
14 |
15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /popup.js: -------------------------------------------------------------------------------- 1 | let bg = chrome.extension.getBackgroundPage() 2 | let searchList = bg.searchList 3 | 4 | // 生成按钮 5 | let butBox = $('but_box') 6 | searchList && searchList.forEach(v => { 7 | let d = document.createElement('div') 8 | d.className = 'dmx_button' 9 | d.dataset.url = v.url 10 | d.textContent = v.title 11 | butBox.appendChild(d) 12 | }) 13 | 14 | // 绑定事件 15 | let inpEl = $('search_input') 16 | let rmEl = $('search_remove') 17 | let butEl = $('search_but') 18 | inpEl.value = bg.searchText || '' 19 | localStorage.selectAll === 'true' ? inpEl.select() : inpEl.focus() 20 | rmEl.style.display = bg.searchText ? 'block' : 'none' 21 | document.querySelector('.search_main').style.width = (bg.searchWidth || 360) + 'px' 22 | butEl.onclick = function () { 23 | let but = butBox.querySelector('.dmx_button') 24 | but && but.click() 25 | } 26 | rmEl.onclick = function () { 27 | inpEl.value = '' 28 | bg.searchText = '' 29 | rmEl.style.display = 'none' 30 | } 31 | inpEl.onkeyup = function (e) { 32 | e.key === 'Enter' && butEl.click() 33 | rmEl.style.display = inpEl.value ? 'block' : 'none' 34 | } 35 | inpEl.onchange = function () { 36 | let text = this.value.trim() 37 | bg.searchText = text 38 | rmEl.style.display = text ? 'block' : 'none' 39 | } 40 | A('.dmx_button').forEach(el => { 41 | el.addEventListener('click', function () { 42 | let text = inpEl.value.trim() 43 | let url = el.dataset.url 44 | if (text) chrome.tabs.create({url: url.replace('{0}', decodeURL(text))}) 45 | }) 46 | }) 47 | 48 | function decodeURL(s) { 49 | s = decodeURIComponent(s) 50 | s = s.replace(/#/g, '%23') 51 | s = s.replace(/&/g, '%26') 52 | return s 53 | } 54 | 55 | function $(id) { 56 | return document.getElementById(id) 57 | } 58 | 59 | function A(s) { 60 | return document.querySelectorAll(s) 61 | } 62 | --------------------------------------------------------------------------------