.bookmarklets {
background-color: #f6f6f6;
border-top: 1px solid #fff;
text-decoration: none !important;
border: 1px solid #e5e5e5;
padding: 3px 5px;
font-weight: 700;
border-radius: 8px;
}
简而言之,小书签是可以作为浏览器的书签栏放置的小型应用程序,它们各自执行特定的功能,具体取决于它们的编码目的。
Bookmarklets 通常是用 Javascript 编写的,它们非常容易安装/删除。要安装小书签,您需要做的就是将它们拖到书签工具栏上,仅此而已。小书签适用于大多数浏览器。
在本文中,我们将向您展示一些对设计人员和开发人员最有用的小书签,即使您是网络冲浪者,它们也可能会派上用场。
小书签有什么作用?
如上所述,小书签由执行特定功能的 JavaScript 代码组成。添加到浏览器的书签栏后,小书签将执行为它们编写代码的 JavaScript 函数。
例如:如果您在书签栏中添加了“西班牙文到英文”书签,单击它会将当前活动浏览器窗口的内容从西班牙文翻译成英文。
为什么书签很酷?
简而言之,它们是高效的!以下是我们认为小书签很酷的几个原因:
- 易于安装——安装小书签很简单。您需要做的就是将它拖到书签工具栏上。要删除它们,只需右键单击它们并点击删除。
- Light – Bookmarklets 只是几行 Javascript 代码。您可以在浏览器中添加 50 多个小书签,它仍然不会滞后,哪怕是一点点。
- 无需更新——大多数插件都需要更新,尤其是当有新版本的浏览器时。另一方面,小书签不太可能需要更新。
- 跨浏览器兼容——小书签是用 Javascript 编写的,它们适用于大多数浏览器。
向浏览器添加/删除小书签
在浏览器中添加或删除小书签真的很容易。您可以将它们拖到书签栏或通过浏览器的书签管理器添加新书签,添加名称并将 JavaScript 代码粘贴到 URL 部分。
要删除小书签,只需右键单击它并选择删除。
小书签可以在移动设备上使用吗?
对此的简短回答是肯定的;小书签在移动设备上工作。
然而,由于它的小屏幕,向移动设备的浏览器添加书签可能具有挑战性。
替代方法是在您的桌面浏览器上添加一个小书签,并确保桌面浏览器和移动浏览器同步。
有用的小书签可提高工作效率
转换书签
- Web to PDF — 将当前页面转换为 PDF。
- Web to QR Code——为当前页面生成二维码。
- 缩短 URL — 将当前网页的 URL 转换为短 URL。查看我们关于带有书签脚本的 URL 缩短器的其他帖子。
- 货币转换– 快速货币(您选择的)转换。转到此网站创建您自己的货币转换书市。
页面信息书签
- 显示密码— 设置密码但忘记了?这个小书签从表单字段中获取您的*****并输出您的实际密码。
- 显示站点信息— 另一个用于查找站点信息的小书签,由 Buildwith.com 提供。
- <a class="bookmarklets" href="javascript:(function(){function getParameterByName(e,t){e=e.replace(/[[]/,"\[").replace(/[]]/,"\]");var n=new RegExp("[\?&]"+e+"=([^&#]*)"),r=n.exec(t==true?location.hash.replace("#","?"):location.search);if(r==null&&t==false){return getParameterByName(e,true)}else{return r==null?"":decodeURIComponent(r[1].replace(/+/g," "))}}str="body{color:#000;background-color:#fff;margin:0;padding:0;font-family:arial,helvetica,sans-serif;font-size:82%}*{font-weight:400;color:#000}h3,h4,h5,h6{margin:0 0 15px;padding:0}#rt{font-size:12px;width:500px}table,td,th,tr{font-size:1em;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word}textarea{width:100%}th{background-color:#eee;color:#000;font-weight:700}td a{width:446px;display:block}.id{background:#eee;color:#000;text-align:center}.g{font-family:arial,sans-serif;color:#000;margin:1em 0;font-size:122%}.g h2{font-family:arial,sans-serif;margin:0}.r{display:inline;font-weight:400;margin:10}.j{width:34em}.std{font-size:82%}.a{color:green}.fl{color:#77c}.bl{display:inline}a{color:#00c}a:visited{color:#551a8b}a:active{color:red}.twitter-share-button{margin-bottom:-5px}p.b{line-height:22px;text-align:center}n”;anchors=document.getElementsByTagName(“a”);var all=[];var keyword=getParameterByName(“q”,false);str+=”
Google SERP Scraper Bookmarklet “;str+=”“;str+=”Google SERP Scraper Bookmarklet
“;str+=”
Keyword – “+keyword+”
“;str+=”
“;str+=”
Result Link Anchor Text n”;var tweetText=’
If you use and like this, please Tweet about it and help us spread the word.
Happy SCRAPing and thanks for sharing!
Coded by cognitiveSEO.‘;var tweetScript=’!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”https://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);’;var k=0;var listing=””;var links=””;var anchorTexts=””;var linksAnchors=””;for(i=0;i<anchors.length;i++){var anchorText=anchors[i].textContent;var anchorLink=anchors[i].href;var linkAnchor="";if(anchorLink.match(/^((?!google.|cache|.yahoo.|youtube.com/results|javascript:{}|javascript:void|javascript:;|api.technorati.com|botw.org/search|del.icio.us/url/check|digg.com/search|search.twitter.com/search|search.yahoo.com/search|siteanalytics.compete.com|tools.seobook.com/general/keyword/suggestions|web.archive.org/web/|whois.domaintools.com|www.alexa.com/data/details/main|www.bloglines.com/search|www.majesticseo.com/search.php|www.semrush.com/info/|www.semrush.com/search.php|www.stumbleupon.com/url|wikipedia.org/wiki/Special:Search).)*$/i)&&anchorLink!=""&&all.indexOf(anchorLink)==-1&&anchorText!=""&&anchors[i].className!="gb_b"){all.push(anchorLink);listing+=anchorLink+"n";anchorTexts+=anchorText+"n";linkAnchor=anchorLink.replace(",","%2C")+", "+anchorText.replace(",","");linksAnchors+=linkAnchor+"n";k=k+1;if(anchorText===undefined)anchorText=anchors[i].innerText;str+="
“;str+=” “+k+” “;str+=”
“+anchors[i].href+” “;str+=”
“+anchorText+” “;str+=”
n”}}str+=”
Links
Anchors
All Data – CSV
“;str+=tweetText;str+=tweetScript;str+=”
“;with(window.open()){document.write(str);document.close()}})()”>Google SERP Scraper — 显示当前页面的所有链接和锚文本。
- 网站堆栈— 想知道网站使用的是什么技术,例如有关 CDN、CSS-JS 框架、CMS 平台、广告网络等的详细信息,这个书签准确地告诉您,
- 检查字体– 您可以轻松检查任何网页中使用的字体,只需单击小书签并将鼠标悬停在文本上即可了解有关它的详细信息,您甚至可以编写自己的文本以查看其外观。
- <a class="bookmarklets" href="javascript:!function(){function e(e){return e&&""!==e?(e=e.trim(),e=e.replace(/s+/gi," "),e=e.replace(/[^a-zA-Z0-9 ]/gi,""),e.split(" ")):0}var t=function(t){var n=e(t)||[],r=t.length;if(0==n.length)return null;var i=0;n.forEach(function(e){i+=e.length}),i/=n.length;var o=n.reduce(function(e,t){return e.length=t.length?e:t});return{wordCount:n.length,charCount:r,minWord:o,maxWord:a,avgLen:i}},n=document.createElement(“div”);n.setAttribute(“style”,”color:black; position:fixed; left:5%; top:5%; width:150px; height:auto; font-size:14px; z-index:10000; background:white; border-radius:0px; border:1px solid grey; padding:5px 2px 5px 4px;”),n.setAttribute(“id”,”analyticsbox”);var r=””;window.getSelection&&(r=window.getSelection().toString());var i=t(r),o=document.createElement(“div”);o.setAttribute(“style”,”margin:5px; font-family:serif; line-height:1.2em; font-size:16px;”),null==i?o.innerHTML=”No text selected.
Select some text and click the bookmark to run text analysis.”:(o.innerHTML=”Words: “+i.wordCount+”
“,o.innerHTML+=”Chars: “+i.charCount+”“,o.innerHTML+=”Advanced Lengths
“,o.innerHTML+=”Avg Word: “+i.avgLen+”
“,o.innerHTML+=”Min Word: “+i.minWord.length+”
“,o.innerHTML+=”Max Word: “+i.maxWord.length+”
“),n.appendChild(o);var a=document.createElement(“div”);a.setAttribute(“style”,” color:black; position:absolute; right:6px; top:5px; width:auto; font-size:14px; text-align:right; font-family:Arial, sans-serif; cursor:pointer;”),a.appendChild(document.createTextNode(“X”)),a.setAttribute(“id”,”textAnalyticsClose”),n.appendChild(a),a.addEventListener(“click”,function(){n.style.display=”none”},!1),document.body.appendChild(n)}();”>文本分析— 显示突出显示的文本的字数、字符数和其他信息。 - 网站挂了?— 显示当前网站是否已关闭。
- 检查内部和外部链接——您可以轻松检查一篇文章中有多少链接指向外部网站,哪些是内部链接。红色 = 内部链接。橙色 = 当前打开的链接。蓝色 = 外部链接
- 查看所有脚本——列出页面上加载的所有脚本,无论是内联的还是通过 url 加载的。
与搜索相关的小书签
- Amazon Search — 使用光标突出显示页面上的文本,单击小书签以在 Amazon 上搜索该文本。非常适合检查亚马逊的价格是否相同或只是由他们出售。
- <a class="bookmarklets" href="javascript:(function(t,u,w){t=''+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection?document.selection.createRange().text:'');u=t?'https://www.google.com/search?q='+encodeURIComponent('define:'+unescape('"')+t+unescape('"')):'';w=window.open(u,'_blank','height=500,width=800,scrollbars=1');w.focus&&w.focus();if(!t){w.document.write(unescape('
Define…
Note: you can also choose a term beforehand by highlighting it on the page!
Created by Peter Coles
var q =document.getElementById(“q”),v=q.value;q.focus();q.value=””;q.value=v;’));w.document.close();}})()”>Dictionary — 在 dictionary.com 中搜索高亮显示的文本。
- Reddit — 在 Reddit 中分享页面。
- Tumblr — 在 Tumblr 上分享图像。
- Wikipedia — 在维基百科中搜索高亮文本。
- Acronym Finder — 在 acronymfinder.com 中搜索高亮文本
- Urban Dictionary — 在 urbandictionary.com 中搜索高亮文本
- Thesaurus.com — 在 thesaurus.com 中搜索突出显示的文本。
- Reference.com — 在 reference.com 中搜索高亮文本。
- WayBack Search — 在 WayBack Search 中搜索网站。
内容共享书签
- Shareaholic — 使用 Shareaholic 书签,您可以在各种社交网络(例如 Facebook、Twitter、Google+、Pinterest 和 LinkedIn)上共享任何网页。您还可以通过电子邮件发送并发布到 Blogger 和 Tumblr 等博客平台。有许多不同的社交网络可供选择,搜索栏非常适合精确定位您正在寻找的特定服务。
- Facebook — Facebook 书签使在 Facebook 上共享任何网页变得容易,无需扩展名。只需单击,您就会看到 Facebook 共享窗口弹出窗口。有五种分享方式:在您的时间线上、在朋友的时间线上、在群组中、在粉丝页面上或在私信中。
- Pocket — Pocket(以前称为 Read It Later)小书签就像扩展一样工作,可以让您保存网页供以后阅读。只需单击它,页面将立即保存;如果您愿意,它还可以让您选择添加标签。
- Instapaper — 对于那些喜欢将 Instapaper 作为保存网页供日后阅读的主要工具的人来说,不要担心,因为它也包含在内!Instapaper 很像 Pocket 和 Readability。当您单击小书签时,您会看到“已保存!” 页面左上角的消息,让您知道它已被添加。
- Toodledo — 我过去曾尝试过 Toodledo Chrome 扩展程序和 Firefox 插件,但我不是它的粉丝;我实际上更喜欢书签。它允许您从 Web 上的任何页面向您的 Toodledo 帐户添加任务。它时尚且易于使用;您可以选择文件夹、添加截止日期,甚至可以为您的任务添加优先级。
翻译书签
- 德语到英语— 将网站内容从德语翻译成英语。
- 简体中文到英文——将网站内容从简体中文翻译成英文。
- 繁体中文到英文— 将网站内容从繁体中文翻译成英文。
- 意大利语到英语— 将网站内容从意大利语翻译成英语。
- 西班牙语到英语——将网站内容从西班牙语翻译成英语。
- Japanese to English — 将网站内容从日语翻译成英语。
与 UI 相关的书签
- PrintWhatYouLike — 虽然您可以通过策略性地放置屏幕截图工具来打印页面的某些部分,但此书签工具可让您在打印之前从页面中删除图像和文本等。这样,您将只打印出您想要的内容,从而节省宝贵的打印机墨水和纸张。
- 放大— 放大当前页面。
- 缩小— 缩小当前页面。
- 突出显示链接– 突出显示当前页面上的所有链接。
- 启用右键单击— 如果网站禁用右键单击,则此书签将启用它。
- 移除样式表——移除当前页面的 CSS。
- 删除图像— 删除当前页面的图像。
- 删除 cookies — 删除当前页面存储的 cookies。
- 将文本设为小写— 将当前页面上的所有文本设为小写。
- 使文本大写— 将当前页面上的所有文本转为大写。
- 大写文本— 将当前页面上的所有文本大写。
- = this.d } s() { return this._ts = o() – this.et, this._p = !1, this } r() { return this._pa = this._ts = o(), this } p() { return this._p = !0, this._pa = o(), this } st() { return this._p = !0, this } } const c = a.createElement(“canvas”); H = c.style, H.position = “fixed”, H.left = 0, H.top = 0, H.width = “100vw”, H.height = “100vh”, H.zIndex = “100000”, H.pointerEvents = “none”, a.body.insertBefore(c, a.body.children[0]); const l = c.getContext(“2d”), p = 300, g = 5e-4, u = 20; let _ = c.width = innerWidth, f = c.height = innerHeight, w = f + u, b = _ + u; const v = 15.2, m = a.createElement(“canvas”), E = m.getContext(“2d”), x = E.createRadialGradient(7.6, 7.6, 0, 7.6, 7.6, 7.6); x.addColorStop(0, “hsla(255,255%,255%,1)”), x.addColorStop(1, “hsla(255,255%,255%,0)”), E.fillStyle = x, E.fillRect(0, 0, v, v); let y = new d(0, !0), C = [], L = new d(0, !0); for (var j = 0; j < p; ++j) { const t = new i; t.a = r() * (f + u), t.b = r() * _, t.c = 1 * (3 * r() + .8), t.d = .1 * h.pow(t.c, 2.5) * 50 * (2 * r() + 1), t.d = t.d setTimeout(n, 100), !1), EL(“resize”, n, !1), e() })()”>Make it snow!</a> — Create snow effect on current page.</li>
</ul>
<h5>Other bookmarklet resources</h5>
<ul>
<li><a rel=” nofollow=”” noopener=”” target=”_blank”>链接小书签——查看此页面以获取更多与页面和链接相关的小书签。 - MrColes Bookmarklet Creator — 在线创建您自己的书签。
- Bookmarkify — 另一个创建您自己的小书签的站点。