跳至正文

50 多个最有用的小书签，可提高工作效率

下載好用的梯子app

.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 部分。

拖动安装小书签

要删除小书签，只需右键单击它并选择删除。

小书签可以在移动设备上使用吗？

对此的简短回答是肯定的；小书签在移动设备上工作。

然而，由于它的小屏幕，向移动设备的浏览器添加书签可能具有挑战性。

替代方法是在您的桌面浏览器上添加一个小书签，并确保桌面浏览器和移动浏览器同步。

有用的小书签可提高工作效率

转换书签
页面信息书签
  • 显示密码— 设置密码但忘记了？这个小书签从表单字段中获取您的*****并输出您的实际密码。
  • 显示站点信息— 另一个用于查找站点信息的小书签，由 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+=”

    n”;var tweetText=’

    If you use and like this, please 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+=”

    “;str+=”

    “;str+=”

    “;str+=”

    n”}}str+=”

    Result Link Anchor Text
    “+k+” “+anchors[i].href+” “+anchorText+”

    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 帐户添加任务。它时尚且易于使用；您可以选择文件夹、添加截止日期，甚至可以为您的任务添加优先级。
翻译书签
与 UI 相关的书签
标签: