📚 探索未知领域：Web开发人员必备的14个超级书签！ 🌐✨-阿里云开发者社区

大家好！今天我有一个超级酷炫的发现，它就是——书签！你可能好奇这是什么神奇的东西，不要着急，继续往下读，我将为你揭开这个神秘面纱！

什么是书签？

一个书签是一小段JavaScript代码，可以保存为浏览器中的书签。当点击这个书签时，它会在当前网页上执行JavaScript代码，执行特定的操作或增强页面的功能。它们真的很棒！那么，让我们看看如何制作一个吧！

如何制作书签

要将书签添加到浏览器中，请确保你可以看到书签栏。按照以下步骤添加一个书签：

右键单击书签栏，然后选择“添加网页”或类似选项；
将网址内容替换为 JavaScript 代码，如下所示：
```
javascript:(function() {
     
  /*这里是你的代码*/
})();
```
上面的代码是一个JavaScript自执行函数。当你点击这个书签时，它就会执行。书签的好处在于它们可以与你所在的页面进行交互。不过，书签有一些重要的局限性！让我们看看下面的那些。

要记住的限制

以下是根据我的经验提供的一些提示，可帮助您创建有效且实用的书签：

避免单行注释：单行注释（ //Comment ）可能会有问题，并且难以在书签中进行故障排除。由于书签只有一行长，因此使用 // 方法可以有效地注释掉它后面的所有内容。请改用 /*Comment*/ 注释掉多行。
注意跨域请求：根据您的浏览器版本和设置，向 API 发出请求的书签可能具有 origin null 。在向书签中的 API 发出请求时，这有时会导致问题。
最小化外部依赖关系：不幸的是，在书签中包含像 <script src="https://url.com/"> 这样的外部依赖关系是不切实际的（有时是不可能的）。在编写代码时请记住这一点。
考虑代码长度限制：某些浏览器可能对书签中允许的字符数有限制。虽然我个人没有遇到过这种情况，但如果您怀疑代码可能超过字符限制，最好缩小或压缩代码。

考虑到这些因素，您就可以创建自己的书签了！因此，让我们从以下示例开始。

书签 1：二维码生成器

此书签使用免费的 API https://api.qrserver.com 。这是一个相对简单的代码，通过转到 API 链接，将当前页面 URL 输入到 ?data= （数据）参数中，为任何页面生成二维码。代码如下：

javascript:(function() {
     var url = encodeURIComponent(window.location.href);  var qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?data=" + url;  window.open(qrCodeUrl, "_blank");})();

书签 2：翻译页面

此书签使用谷歌翻译来翻译您所在的任何页面。单击时，它会提示输入语言（双字母代码，例如“中文简体”→“zh-CN”），并打开翻译后的页面。代码如下：

javascript:(function() {
     var lang = prompt("Enter language code to translate to:", "en");  var translationUrl = "https://translate.google.com/translate?sl=auto&tl=" + lang + "&u=" + encodeURIComponent(window.location.href);  window.open(translationUrl, "_blank");})();

书签 3：深色模式

此书签会将页面转换为深色模式（或尝试）。它可能会破坏某些页面。

javascript:(function() {
   var style = document.createElement('style');style.innerHTML = `* {color: white !important;background-color: #111000 !important;}`;document.head.appendChild(style);})();

书签 4：密码生成器

这个方便的书签会生成一个随机密码。系统会提示您输入长度，并生成密码。这个书签特别利用了非常方便的浏览器 API 占位符，如提示。

javascript:(function() {
     function generatePassword(length) {
       var charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-+={}|:"?#$*';    var password = '';    for (var i = 0; i < length; i++) {
         var randomIndex = Math.floor(Math.random() * charset.length);      password += charset.charAt(randomIndex);    }    return password;  }  var passwordLength = prompt("Enter password length:", "8");  var generatedPassword = generatePassword(passwordLength);  prompt("Generated Password:", generatedPassword);})();

书签 5：电子邮件复制

如果您像我一样，并且偏执于打错电子邮件，那么此书签适合您。将 you@example.com 替换为您的真实电子邮件。

javascript:(function() {
     const email = "you@example.com";  const dummyElement = document.createElement("textarea");  document.body.appendChild(dummyElement);  dummyElement.value = email;  dummyElement.select();  document.execCommand("copy");  document.body.removeChild(dummyElement);})();

书签 6：页字数

当您单击书签时，它会扫描页面并告诉您上面有多少个单词。

javascript:(function() {
     var text = document.body.innerText || document.body.textContent;  var words = text.trim().split(/\s+/).length;  alert("Word Count: " + words);})();

书签 7：SEO 技巧书签

功能不全，但我在其中放了 20 个 SEO 技巧来帮助您入门：

javascript:(function() {
     var pageUrl = window.location.href;  var tips = processDiagnosticData();  if (tips) {
       alert('Page Diagnosis Tips:\n\n' + tips);  }  function processDiagnosticData() {
       var tips = '';    var titleTag = document.querySelector('title');    if (!titleTag) {
         tips += 'Title Tag is missing\n';    }    var metaDescriptionTag = document.querySelector('meta[name="description"]');    if (!metaDescriptionTag) {
         tips += 'Meta Description is missing\n';    }    var headingTags = document.querySelectorAll('h1, h2, h3, h4, h5, h6');    if (headingTags.length === 0) {
         tips += 'Heading Tags are missing\n';    }    var imgTags = document.querySelectorAll('img');    if (imgTags.length === 0) {
         tips += 'Image Tags are missing\n';    }    var anchorTags = document.querySelectorAll('a');    if (anchorTags.length === 0) {
         tips += 'Anchor Tags are missing\n';    }    var scriptTags = document.querySelectorAll('script');    if (scriptTags.length === 0) {
         tips += 'Script Tags are missing\n';    }    var linkTags = document.querySelectorAll('link');    if (linkTags.length === 0) {
         tips += 'Link Tags are missing\n';    }    var metaViewportTag = document.querySelector('meta[name="viewport"]');    if (!metaViewportTag) {
         tips += 'Viewport Meta Tag is missing\n';    }    var canonicalTag = document.querySelector('link[rel="canonical"]');    if (!canonicalTag) {
         tips += 'Canonical Tag is missing\n';    }    var robotsTag = document.querySelector('meta[name="robots"]');    if (!robotsTag) {
         tips += 'Robots Meta Tag is missing\n';    }    var ogTags = document.querySelectorAll('meta[property^="og:"]');    if (ogTags.length === 0) {
         tips += 'Open Graph Tags are missing\n';    }    var twitterTags = document.querySelectorAll('meta[name^="twitter:"]');    if (twitterTags.length === 0) {
         tips += 'Twitter Card Tags are missing\n';    }    var altAttributes = document.querySelectorAll('img:not([alt])');    if (altAttributes.length > 0) {
         tips += 'Alt Attributes are missing for some Images\n';    }    var formTags = document.querySelectorAll('form');    if (formTags.length === 0) {
         tips += 'Form Tags are missing\n';    }    var inputTags = document.querySelectorAll('input');    if (inputTags.length === 0) {
         tips += 'Input Tags are missing\n';    }    var textareaTags = document.querySelectorAll('textarea');    if (textareaTags.length === 0) {
         tips += 'Textarea Tags are missing\n';    }    var buttonTags = document.querySelectorAll('button');    if (buttonTags.length === 0) {
         tips += 'Button Tags are missing\n';    }    var tableTags = document.querySelectorAll('table');    if (tableTags.length === 0) {
         tips += 'Table Tags are missing\n';    }    var metaCharsetTag = document.querySelector('meta[charset]');    if (!metaCharsetTag) {
         tips += 'Charset Meta Tag is missing\n';    }    return tips;  }})();

书签 8：元素荧光笔

基本上，它会更改所有页面元素的颜色，因此您可以看到它们：只需单击一下即可向我显示页面布局。对于开发人员来说，它可以帮助我们发现页面的问题。

javascript:(function(){
     function getRandomColor() {
       var letters = "0123456789ABCDEF";    var color = "#";    for (var i = 0; i < 6; i++) {
         color += letters[Math.floor(Math.random() * 16)];    }    return color;  }  function getContrastingColor(color) {
       var hex = color.slice(1);    var r = parseInt(hex.substr(0, 2), 16);    var g = parseInt(hex.substr(2, 2), 16);    var b = parseInt(hex.substr(4, 2), 16);    var yiq = (r * 299 + g * 587 + b * 114) / 1000;    return yiq >= 128 ? "#000000" : "#FFFFFF";  }  function applyRandomStyle(element) {
       var randomColor = getRandomColor();    element.style.backgroundColor = randomColor;    element.style.color = getContrastingColor(randomColor);  }  var elements = document.getElementsByTagName("*");  for (var i = 0; i < elements.length; i++) {
       applyRandomStyle(elements[i]);  }})();

书签 9：JSON 格式化程序

此书签设置 JSON API 响应的格式：

javascript:(function() {
    function syntaxHighlight(json) {
    json = JSON.stringify(json, undefined, 4); json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, function (match) { var cls = %27color: black;%27; if (/^"/.test(match)) {
    if (/:$/.test(match)) {
    cls = %27color: green;%27; } else {
    cls = %27color: darkorange;%27; } } else if (/true|false/.test(match)) {
    cls = %27color: red;%27; } else if (/null|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?/.test(match)) {
    cls = %27color: purple;%27; } return %27<span style="%27 + cls + %27">%27 + match + %27</span>%27; }); } var contentType = document.contentType; if (contentType === "application/json") {
    var json = JSON.parse(document.body.innerText); var highlighted = syntaxHighlight(json); document.body.innerHTML = %27<pre>%27 + highlighted + %27</pre>%27; document.body.style.fontFamily = "Arial, sans-serif"; document.body.style.fontSize = "15px"; } else {
    alert("This page does not contain JSON."); }}());

书签 10：拾色器

在任何页面上打开颜色选择器，以便您可以将其用于 Web 开发内容。

javascript:(function(){
     var container = document.createElement('div');  container.style.position = 'fixed';  container.style.top = '10px';  container.style.right = '10px';  container.style.zIndex = '9999';  container.style.backgroundColor = 'white';  container.style.borderRadius = '10px';  container.style.padding = '10px';  container.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';  container.style.display = 'flex';  container.style.alignItems = 'center';  var colorInput = document.createElement('input');  colorInput.type = 'color';  colorInput.style.width = '30px';  colorInput.style.height = '30px';  colorInput.style.marginRight = '10px';  var copyButton = document.createElement('button');  copyButton.textContent = 'Copy';  copyButton.style.padding = '5px 10px';  copyButton.style.marginRight = '10px';  copyButton.style.backgroundColor = '#4CAF50';  copyButton.style.color = 'white';  copyButton.style.border = 'none';  copyButton.style.borderRadius = '5px';  copyButton.style.cursor = 'pointer';  var closeButton = document.createElement('button');  closeButton.textContent = 'Close';  closeButton.style.padding = '5px 10px';  closeButton.style.backgroundColor = '#f44336';  closeButton.style.color = 'white';  closeButton.style.border = 'none';  closeButton.style.borderRadius = '5px';  closeButton.style.cursor = 'pointer';  copyButton.addEventListener('click', function() {
       var color = colorInput.value;    var tempInput = document.createElement('input');    tempInput.value = color;    document.body.appendChild(tempInput);    tempInput.select();    document.execCommand('copy');    document.body.removeChild(tempInput);    alert('Color copied to clipboard: ' + color);  });  closeButton.addEventListener('click', function() {
       container.remove();  });  container.appendChild(colorInput);  container.appendChild(copyButton);  container.appendChild(closeButton);  document.body.appendChild(container);})();

书签 11：桌面吸管

这个超级方便的书签让你不仅可以从页面上选择颜色，还可以从整个桌面上选择颜色！

javascript:(function(){
   "use strict";function _typeof(t){
   return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){
   return typeof t}:function(t){
   return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _defineProperties(t,n){
   for(var e=0;e<n.length;e++){
   var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function _createClass(t,n,e){
   return n&&_defineProperties(t.prototype,n),e&&_defineProperties(t,e),Object.defineProperty(t,"prototype",{
   writable:!1}),t}function _classCallCheck(t,n){
   if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function _inherits(t,n){
   if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{
   constructor:{
   value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{
   writable:!1}),n&&_setPrototypeOf(t,n)}function _createSuper(e){
   var o=_isNativeReflectConstruct();return function(){
   var t,n=_getPrototypeOf(e);return _possibleConstructorReturn(this,o?(t=_getPrototypeOf(this).constructor,Reflect.construct(n,arguments,t)):n.apply(this,arguments))}}function _possibleConstructorReturn(t,n){
   if(n&&("object"===_typeof(n)||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(t){
   if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function _wrapNativeSuper(t){
   var e="function"==typeof Map?new Map:void 0;return(_wrapNativeSuper=function(t){
   if(null===t||!_isNativeFunction(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){
   if(e.has(t))return e.get(t);e.set(t,n)}function n(){
   return _construct(t,arguments,_getPrototypeOf(this).constructor)}return n.prototype=Object.create(t.prototype,{
   constructor:{
   value:n,enumerable:!1,writable:!0,configurable:!0}}),_setPrototypeOf(n,t)})(t)}function _construct(t,n,e){
   return(_construct=_isNativeReflectConstruct()?Reflect.construct:function(t,n,e){
   var o=[null];o.push.apply(o,n);n=new(Function.bind.apply(t,o));return e&&_setPrototypeOf(n,e.prototype),n}).apply(null,arguments)}function _isNativeReflectConstruct(){
   if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{
   return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){
   })),!0}catch(t){
   return!1}}function _isNativeFunction(t){
   return-1!==Function.toString.call(t).indexOf("[native code]")}function _setPrototypeOf(t,n){
   return(_setPrototypeOf=Object.setPrototypeOf||function(t,n){
   return t.__proto__=n,t})(t,n)}function _getPrototypeOf(t){
   return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(t){
   return t.__proto__||Object.getPrototypeOf(t)})(t)}var copiboo,eyeDropper,options_autoClosing="true"===localStorage.getItem("copiboo_enable_auto_closing"),options_lang=null!==localStorage.getItem("options_lang")?localStorage.getItem("options_lang"):"en",options_modal_size=null!==localStorage.getItem("options_modal_size")?localStorage.getItem("options_modal_size"):"100",options_autoCopying=null!==localStorage.getItem("copiboo_enable_auto_copying")?localStorage.getItem("copiboo_enable_auto_copying"):"no",copibooElement=function(){
   _inherits(a,_wrapNativeSuper(HTMLElement));var o=_createSuper(a);function a(){
   _classCallCheck(this,a);var t,n=(t=o.call(this)).attachShadow({
   mode:"open"}),e=document.createElement("style");return e.textContent='\n\t\t*, ::before, ::after { box-sizing: border-box }\n\n\t\t.sr-only {\n\t\t\tborder: 0 !important;\n\t\t\tclip: rect(1px, 1px, 1px, 1px) !important;\n\t\t\t-webkit-clip-path: inset(50%) !important;\n\t\t\tclip-path: inset(50%) !important;\n\t\t\theight: 1px !important;\n\t\t\tmargin: -1px !important;\n\t\t\toverflow: hidden !important;\n\t\t\tpadding: 0 !important;\n\t\t\tposition: absolute !important;\n\t\t\twidth: 1px !important;\n\t\t\twhite-space: nowrap !important;\n\t\t}\n\n\t\t:is(button, summary, input, select):hover { outline: auto }\n\n\t\tbutton, \n\t\tsummary { cursor: pointer }\n\n\t\ta { \n\t\t\tcolor: inherit; \n\t\t\toutline-offset: 0.25em; \n\t\t}\n\n\t\ta:hover { outline: auto  }\n\n\t\t:is([type=radio], [type=checkbox]) { \n\t\t\tinline-size: 1em; \n\t\t\tblock-size: 1em; \n\t\t\tmargin: 0; \n\t\t\tfont-size: 1em; \n\t\t}\n\n\t\t[type=range] { \n\t\t\twidth: 9em;\n\t\t\tmargin: 0;\n\t\t\tfont-size: 1em; \n\t\t}\n\n\t\toutput {\n\t\t\tfont-family: monospace;\n\t\t}\n\n\t\tselect {\n\t\t\tfont: inherit;\n\t\t}\n\n\t\t[type=color] {\n\t\t\tinline-size: 100%; \n\t\t\tblock-size: 100%\n\t\t}\n\n\t\tsvg {\n\t\t\tinline-size: 1.5em; \n\t\t\tblock-size: 1.5em;\n\t\t\tfill: none; \n\t\t\tstroke: currentColor; \n\t\t\tstroke-width: 1.5; \n\t\t\tstroke-linecap:round; \n\t\t\tstroke-linejoin:round;\n\t\t}\n\n\t\tsection {\n\t\t\t--btn-s: 2em; \n\t\t\t--p: 1em; \n\t\t\t--rad: 0.5em; \n\t\t\t--offset: 1.5em; \n\t\t\t--timer-h: 0.25em; \n\t\t\tbox-sizing: border-box; \n\t\t\tposition: fixed; \n\t\t\tz-index: 9999; \n\t\t\tdisplay: flex; \n\t\t\tgap: 0.5em; \n\t\t\tinset-block-start: var(--offset); \n\t\t\tinset-inline-end: var(--offset); \n\t\t\tinline-size: min-content; \n\t\t\tmax-inline-size: calc(100% - var(--offset) * 2); \n\t\t\tpadding-block-start: var(--p); \n\t\t\tpadding-block-end: calc(var(--p) + var(--timer-h)); \n\t\t\tpadding-inline: var(--p); \n\t\t\tborder-radius: 0.5em; \n\t\t\tfont-size: min(calc(1rem * (var(--custom-fs) / 100)), 4.2vw); \n\t\t\tfont-family: system-ui; \n\t\t\tline-height: 1.4; \n\t\t\tcolor: #000; \n\t\t\tbackground: linear-gradient(rgb(0 0 0 / 5%),rgb(0 0 0 / 5%)) rgba(var(--color-rgb), 0.25); \n\t\t\tbackdrop-filter: blur(5px); \n\t\t\taccent-color: var(--color);\n\t\t\tanimation: hide 300ms 5000ms forwards\n\t\t}\n\n\t\tsection > div {\n\t\t\tmax-height: calc(100vh - var(--offset) * 2 - var(--p) * 2);\n\t\t\toverflow-y: auto;\n\t\t}\n\n\t\theader {\n\t\t\tposition: relative; \n\t\t\tz-index: 2; \n\t\t\tbox-shadow: 0 .5em .21em -.625em; \n\t\t\tpadding: calc(var(--p) * .5) calc(var(--p) * 0.8); \n\t\t\tborder-radius: var(--rad) var(--rad) 0 0;\n\t\t\tfont-size: 1.25em; \n\t\t\tfont-variant-caps: small-caps; \n\t\t\tfont-weight: 700; \n\t\t\tbackground-color: var(--color); \n\t\t\tcolor: var(--text-color); \n\t\t}\n\n\t\t.timer {\n\t\t\tposition: absolute; \n\t\t\tinset-inline-start: var(--p); \n\t\t\tinset-block-end: calc(var(--p) / 2); \n\t\t\tinline-size: calc(100% - var(--p) * 2); \n\t\t\tblock-size: var(--timer-h); \n\t\t\tbackground-color: var(--color); \n\t\t\tanimation: timer 5000ms linear forwards; \n\t\t\ttransform-origin: left center; \n\t\t\ttransform: scaleX(0);\n\t\t}\n\n\t\t[dir="rtl"] .timer {\n\t\t\ttransform-origin: right center; \n\t\t}\n\n\t\t.close {\n\t\t\t--tx: 50%;\n\t\t\tposition: absolute; \n\t\t\tinset-block-start: 0; \n\t\t\tinset-inline-end: 0; \n\t\t\tdisplay: flex; \n\t\t\tpadding: 0.5em;\n\t\t\tborder: 0; \n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 1em;\n\t\t\tbackground-color: var(--color); \n\t\t\tcolor: var(--text-color); \n\t\t\ttransform: translate(var(--tx), -50%); \n\t\t}\n\n\t\t[dir="rtl"] .close {\n\t\t\t--tx: -50%;\n\t\t}\n\n\t\t.content {\n\t\t\tpadding: var(--p); \n\t\t\tbackground-color: #fff\n\t\t}\n\n\t\t.main {\n\t\t\t--gap: calc(var(--p) / 2); \n\t\t\tdisplay: grid; \n\t\t\tgap: var(--gap); \n\t\t\tfont-family: monospace\n\t\t}\n\n\t\t.main__left {\n\t\t\tgrid-row: 1 / 3; \n\t\t\tdisplay: flex;\n\t\t\tinline-size: calc(var(--btn-s) * 2 + var(--gap)); \n\t\t}\n\n\t\t.main__right {\n\t\t\t--gap: calc(var(--p) / 2); \n\t\t\tgrid-column-start: 2; \n\t\t\tdisplay: flex; \n\t\t\tgap: var(--gap); \n\t\t\talign-items: center; \n\t\t\tpadding-inline-end: var(--gap); \n\t\t\tborder-radius: 0.25em; \n\t\t\tbackground: linear-gradient(rgb(0 0 0 / 2.5%),rgb(0 0 0 / 2.5%)) rgba(var(--color-rgb), 0.25);\n\t\t}\n\n\t\t.copy { \n\t\t\torder: -1; \n\t\t\tdisplay: flex; \n\t\t\talign-items: center; \n\t\t\tjustify-content: center; \n\t\t\tinline-size: var(--btn-s); \n\t\t\tblock-size: var(--btn-s); \n\t\t\tborder-radius: inherit; \n\t\t\tborder: 0; \n\t\t\tfont-size: 1em; \n\t\t\tbackground: linear-gradient(rgb(0 0 0 / 5%),rgb(0 0 0 / 5%)) var(--color); \n\t\t\tcolor: var(--text-color); \n\t\t\toutline-offset: -0.1875em; \n\t\t}\n\n\t\tdetails { padding-block-start: var(--p) }\n\n\t\tsummary {\n\t\t\tfont-variant-caps: small-caps; \n\t\t\tfont-weight: 500;\n\t\t}\n\n\t\tsummary::marker { content: "⚙️ " }\n\n\t\tdetails > div {\n\t\t\t--details_btw: 0.15em; \n\t\t\tposition: relative; \n\t\t\tdisplay: grid;\n\t\t\tgap: calc(var(--p) * 0.75);\n\t\t\tflex-direction: column;\n\t\t\tpadding: var(--p); \n\t\t\tborder-block-start: var(--details_btw) solid var(--color); \n\t\t\tmargin-block-start: var(--p); \n\t\t\tfont-size: 0.875em; \n\t\t\tbackground: linear-gradient(rgb(0 0 0 / 2.5%),rgb(0 0 0 / 2.5%)) rgba(var(--color-rgb), 0.1)\n\t\t}\n\n\t\tdetails > div::before { \n\t\t\tcontent: ""; \n\t\t\tposition: absolute; \n\t\t\tinset-inline-start: 3.5em; \n\t\t\tinset-block-end: calc(100% + var(--details_btw) - 1px); \n\t\t\tinline-size: 1em; \n\t\t\tblock-size: 1em; \n\t\t\tclip-path: polygon(0 100%, 50% 50%, 100% 100%); \n\t\t\tbackground-color: var(--color); \n\t\t\tpointer-events: none \n\t\t}\n\n\t\tdetails .instructions {\n\t\t\tmargin: 0; \n\t\t\tfont-size: 0.875em\n\t\t}\n\n\t\t.form-group { \n\t\t\tdisplay: flex; \n\t\t\talign-items: center; \n\t\t\tgap: 0.4em;\n\t\t}\n\n\t\t.form-group--wrap { \n\t\t\tflex-wrap: wrap;\n\t\t}\n\n\t\t.form-group :is(input, select) { \n\t\t\tflex: 0 0 auto \n\t\t}\n\n\t\tfieldset {\n\t\t\tborder: 0.0625rem solid var(--color); \n\t\t\tmargin: 0;\n\t\t}\n\n\t\tfieldset legend {\n\t\t\tpadding: 0 0.5em;\n\t\t\tfont-weight: 500;\n\t\t}\n\n\t\tfieldset > div { \n\t\t\tpadding: calc(var(--p) / 4) calc(var(--p) / 2); \n\t\t}\n\n\t\t.range-output {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: inherit;\n\t\t\twidth: 100%;\t\n\t\t}\n\n\t\t.footer {\n\t\t\tmargin: 0;\n\t\t\ttext-align: end;\n\t\t\tfont-size: 0.875em;\n\t\t}\n\t\t\n\t\t@keyframes timer { to { transform: scaleX(1) } }\n\t\t@keyframes hide { to { transform: translateY(-50%); opacity: 0 } }\n\t',n.appendChild(e),n.innerHTML+='\n\t\t<section aria-labelledby="title"> \n\t\t\t<span tabindex="-1" class="hex-sr sr-only"></span>\n\t\t\t<div>\n\t\t\t\t<header id="title" data-i18n data-i18n-en="Color picker" data-i18n-fr="Sélecteur de couleur" data-i18n-ar="أداة انتقاء اللون"></header>\n\t\t\t\t<button type="button" class="close" title="Close" data-i18n data-i18n-en="Close" data-i18n-fr="Fermer" data-i18n-ar="أغلق">\n\t\t\t\t\t<svg viewBox="0 0 24 24">\n\t\t\t\t\t\t<path stroke="none" d="M0 0h24v24H0z" fill="none"/>\n\t\t\t\t\t\t<line x1="18" y1="6" x2="6" y2="18" />\n\t\t\t\t\t\t<line x1="6" y1="6" x2="18" y2="18" />\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t\t<div class="content">\n\t\t\t\t\t<div class="main">\n\t\t\t\t\t\t<div class="main__left">\n\t\t\t\t\t\t\t<input type="color" aria-label="Pick another color" data-i18n data-i18n-en="Pick another color" data-i18n-fr="Choisir une autre couleur" data-i18n-ar="اختر لونًا آخر">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="main__right">\n\t\t\t\t\t\t\t<span class="hex"></span>\n\t\t\t\t\t\t\t<button type="button" class="copy" data-copy-target=".hex" title="Copy hex code to clipboard" data-i18n data-i18n-en="Copy hex code to clipboard" data-i18n-fr="Copier le code hexadécimal dans le presse-papiers" data-i18n-ar="انسخ الكود السداسي عشرية إلى الحافظة">\n\t\t\t\t\t\t\t\t<svg viewBox="0 0 24 24">\n\t\t\t\t\t\t\t\t\t<path stroke="none" d="M0 0h24v24H0z" fill="none"/>\n\t\t\t\t\t\t\t\t\t<rect x="8" y="8" width="12" height="12" rx="2" />\n\t\t\t\t\t\t\t\t\t<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="main__right">\n\t\t\t\t\t\t\t<span class="rgb" style="width: 16ch"></span>\n\t\t\t\t\t\t\t<button type="button" class="copy" data-copy-target=".rgb" title="Copy RGB to clipboard" data-i18n data-i18n-en="Copy RGB to clipboard" data-i18n-fr="Copier le code RGB dans le presse-papiers" data-i18n-ar="انسخ RGB إلى الحافظة">\n\t\t\t\t\t\t\t\t<svg viewBox="0 0 24 24" >\n\t\t\t\t\t\t\t\t\t<path stroke="none" d="M0 0h24v24H0z" fill="none"/>\n\t\t\t\t\t\t\t\t\t<rect x="8" y="8" width="12" height="12" rx="2" />\n\t\t\t\t\t\t\t\t\t<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<details>\n\t\t\t\t\t\t<summary data-i18n data-i18n-en="Options" data-i18n-fr="Options" data-i18n-ar="والخيارات"></summary>\n\t\t\t\t\t\t<div>  \n\t\t\t\t\t  \t<p class="instructions" data-i18n data-i18n-en="These options are saved on the current domain." data-i18n-fr="Ces options sont conservées sur le domaine en cours." data-i18n-ar="يتم حفظ هذه الخيارات في المجال الحالي."></p>\n\t\t\t\t\t\t\t<div class="form-group"> \n\t\t\t\t\t\t\t\t<label for="choose-lang" data-i18n data-i18n-en="Language" data-i18n-fr="Langue" data-i18n-ar="لغة"></label>\n\t\t\t\t\t\t\t\t<select id="choose-lang" name="options_lang">\n\t\t\t\t\t\t\t\t\t<option value="en" lang="en" data-i18n data-i18n-en="English" data-i18n-fr="English (Anglais)" data-i18n-ar="English (الإنجليزية)">English</option>\n\t\t\t\t\t\t\t\t\t<option value="fr" lang="fr" data-i18n data-i18n-en="Français (French)" data-i18n-fr="Français" data-i18n-ar="Français (الفرنسية)">Français (French)</option>\n\t\t\t\t\t\t\t\t\t<option value="ar" lang="ar" data-i18n data-i18n-en="العربية (Arabic)" data-i18n-fr="العربية (Arabe)" data-i18n-ar="العربية">العربية (Arabic)</option>\n\t\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t  \t</div>\n\t\t\t\t\t\t\t<form class="form-group form-group--wrap" oninput="options_modal_size_result.value=parseInt(options_modal_size.value)+\'%\'">\n\t\t\t\t\t\t\t\t<label for="set-modal-size" data-i18n data-i18n-en="Modal size" data-i18n-fr="Taille de la modale" data-i18n-ar="حجم مشروط"></label>\n\t\t\t\t\t\t\t\t<div class="range-output">\n\t\t\t\t\t\t\t\t\t<input type="range" id="set-modal-size" name="options_modal_size" value="100" min="50" max="200">\n\t\t\t\t\t\t\t\t\t<output name="options_modal_size_result">100%</output>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t  \t</form>\n\t\t\t\t\t\t  \t<p class="instructions" data-i18n data-i18n-en="Modifications below will be applied on the next use of the bookmarklet." data-i18n-fr="Les modifications ci-après seront appliquées à la prochain exécution du bookmarklet." data-i18n-ar="سيتم تطبيق التعديلات أدناه على الاستخدام التالي للعلامة المرجعية."></p>\n\t\t\t\t\t\t\t<div class="form-group"> \n\t\t\t\t\t\t\t\t<input type="checkbox" name="copiboo_enable_auto_closing" id="enable_auto_closing">\n\t\t\t\t\t\t\t\t<label for="enable_auto_closing" data-i18n data-i18n-en="Enable auto-closing" data-i18n-fr="Activer la fermeture automatique" data-i18n-ar="قم بتمكين الإغلاق التلقائي"></label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<fieldset>\n\t\t\t\t\t\t\t\t<legend data-i18n data-i18n-en="Auto-copying" data-i18n-fr="Copie automatique" data-i18n-ar="النسخ التلقائي"></legend>\n\t\t\t\t\t\t\t\t<div class="form-group"> \n\t\t\t\t\t\t\t\t\t<input type="radio" name="copiboo_enable_auto_copying" id="enable_auto_copying_no" value="no" checked>\n\t\t\t\t\t\t\t\t\t<label for="enable_auto_copying_no" data-i18n data-i18n-en="Disabled" data-i18n-fr="Désactivé" data-i18n-ar="عاجز"></label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="form-group"> \n\t\t\t\t\t\t\t\t\t<input type="radio" name="copiboo_enable_auto_copying" id="enable_auto_copying_hex" value="hex">\n\t\t\t\t\t\t\t\t\t<label for="enable_auto_copying_hex" data-i18n data-i18n-en="Enable Hex auto-copying" data-i18n-fr="Copier le code hexa" data-i18n-ar="تفعيل النسخ التلقائي لـ Hex"></label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="form-group"> \n\t\t\t\t\t\t\t\t\t<input type="radio" name="copiboo_enable_auto_copying" id="enable_auto_copying_rgb" value="rgb">\n\t\t\t\t\t\t\t\t\t<label for="enable_auto_copying_rgb" data-i18n data-i18n-en="Enable RGB auto-copying" data-i18n-fr="Copier le code RGB" data-i18n-ar="قم بتمكين النسخ التلقائي لـ RGB"></label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</fieldset>\n\t\t\t\t\t\t\t<p class="footer">\n\t\t\t\t\t\t\t\t<a href="https://github.com/twogrey/CoPiBoo---Color-Picker-Bookmarklet" target="_blank" data-i18n data-i18n-en="Source code" data-i18n-fr="Code source" data-i18n-ar="مصدر الرمز"></a> <span aria-hidden="true">·</span> <a href="https://ko-fi.com/twogrey" target="_blank" data-i18n data-i18n-en="Support" data-i18n-fr="Soutenir" data-i18n-ar="دعم "></a> ☕\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</detail>\n\t\t\t\t</div>\n\t\t  \t</div>\n  \t\t\t<span class="timer"></span>\n  \t\t</section>\n  \t',t}return _createClass(a)}();function lightOrDark(t){
   var n,e,t=t.match(/^rgb/)?(n=(t=t.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/))[1],e=t[2],t[3]):(n=(t=+("0x"+t.slice(1).replace(t.length<5&&/./g,"$&$&")))>>16,e=t>>8&255,255&t);return 127.5<Math.sqrt(n*n*.299+e*e*.587+t*t*.114)?"light":"dark"}function hexToRGB(t,n){
   t=t.replace("#","").match(/.{1,2}/g),t=[parseInt(t[0],16),parseInt(t[1],16),parseInt(t[2],16)];return n?t:"rgb("+t+")"}function removeContainer(){
   document.querySelector("copi-bookmarklet").parentNode.removeChild(document.querySelector("copi-bookmarklet"))}function setI18n(e){
   copiboo.querySelectorAll("[data-i18n]").forEach(function(t){
   var n=t.getAttribute("data-i18n-"+e);t.getAttribute("title")?t.setAttribute("title",n):t.getAttribute("aria-label")?t.setAttribute("aria-label",n):t.textContent=n}),copiboo.querySelector("section").setAttribute("lang",e),"ar"==e?copiboo.querySelector("section").setAttribute("dir","rtl"):copiboo.querySelector("section").removeAttribute("dir")}function updateSize(t){
   copiboo.querySelector("section").style.setProperty("--custom-fs",t)}function baseSet(t){
   copiboo.querySelector(".hex").textContent=t,copiboo.querySelector(".hex-sr").textContent=t,copiboo.querySelector(".rgb").textContent=hexToRGB(t),copiboo.querySelector("section").style.setProperty("--text-color","dark"===lightOrDark(t)?"#fff":"#000"),copiboo.querySelector("section").style.setProperty("--color",t),copiboo.querySelector("section").style.setProperty("--color-rgb",hexToRGB(t,!0))}function pauseAnimations(){
   copiboo.querySelector("section").style.animationPlayState="paused",copiboo.querySelector(".timer").style.animationPlayState="paused"}function runAnimations(){
   copiboo.querySelector("section").style.animationPlayState="running",copiboo.querySelector(".timer").style.animationPlayState="running"}window.EyeDropper?(eyeDropper=new EyeDropper).open().then(function(t){
   document.querySelector("copi-bookmarklet")&&removeContainer();var n=document.createElement("copi-bookmarklet");document.body.appendChild(n),void 0===customElements.get("copi-bookmarklet")&&customElements.define("copi-bookmarklet",copibooElement),copiboo=document.querySelector("copi-bookmarklet").shadowRoot,updateSize(options_modal_size),setI18n(options_lang),copiboo.querySelector(".hex-sr").focus(),options_autoClosing||(copiboo.querySelector(".timer").style.display="none",copiboo.querySelector("section").style.setProperty("--timer-h","0px"),copiboo.querySelector("section").style.animation="none"),copiboo.querySelector("[type=color]").value=t.sRGBHex,baseSet(t.sRGBHex),copiboo.querySelector("section").addEventListener("animationend",function(t){
   t.target===this&&removeContainer()}),options_autoClosing&&(copiboo.querySelector("section").addEventListener("mouseenter",pauseAnimations),copiboo.querySelector("section").addEventListener("focusin",pauseAnimations),copiboo.querySelector("section").addEventListener("mouseleave",runAnimations),copiboo.querySelector("section").addEventListener("focusout",runAnimations)),copiboo.querySelector(".close").addEventListener("click",removeContainer),copiboo.querySelector("#choose-lang").value=options_lang,copiboo.querySelector("#set-modal-size").value=options_modal_size,copiboo.querySelector('[name="options_modal_size_result"]').textContent=options_modal_size+"%",copiboo.querySelector("#enable_auto_closing").checked=options_autoClosing,copiboo.querySelector('[name="copiboo_enable_auto_copying"][value="'+options_autoCopying+'"]').checked=!0,copiboo.querySelectorAll("details :is(input, select)").forEach(function(t){
   t.addEventListener("change",function(t){
   "radio"==t.target.type||"select-one"==t.target.type||"range"==t.target.type?localStorage.setItem(this.getAttribute("name"),this.value):"checkbox"==t.target.type&&localStorage.setItem(this.getAttribute("name"),this.checked)})}),copiboo.querySelector("#choose-lang").addEventListener("change",function(){
   setI18n(this.value)}),copiboo.querySelector("#set-modal-size").addEventListener("change",function(){
   updateSize(this.value)}),"hex"==options_autoCopying?navigator.clipboard.writeText(t.sRGBHex):"rgb"==options_autoCopying&&navigator.clipboard.writeText(hexToRGB(t.sRGBHex)),copiboo.querySelectorAll(".copy").forEach(function(t){
   t.addEventListener("click",function(){
   navigator.clipboard.writeText(copiboo.querySelector(this.getAttribute("data-copy-target")).textContent)})}),copiboo.querySelector("[type=color]").addEventListener("input",function(){
   baseSet(this.value)})}).catch(function(t){
   alert(t)}):alert("Your browser does not support the EyeDropper API");})();

书签12：清除缓存

清除当前选项卡的缓存。

javascript:(function(){
     localStorage.clear();  sessionStorage.clear();  alert('Cache cleared!');})();

书签13：广告去除器

从当前页面中移除广告。

javascript:(function(){
       /* Ad-B-Gone: Bookmarklet that removes obnoxious ads from pages */    var selectors = [    /* By ID: */    '#sidebar-wrap', '#advert', '#xrail', '#middle-article-advert-container',    '#sponsored-recommendations', '#around-the-web', '#sponsored-recommendations',    '#taboola-content', '#taboola-below-taboola-native-thumbnails', '#inarticle_wrapper_div',    '#rc-row-container', '#ads', '#at-share-dock', '#at4-share', '#at4-follow', '#right-ads-rail',    'div#ad-interstitial', 'div#advert-article', 'div#ac-lre-player-ph',    /* By Class: */    '.ad', '.avert', '.avert__wrapper', '.middle-banner-ad', '.advertisement',    '.GoogleActiveViewClass', '.advert', '.cns-ads-stage', '.teads-inread', '.ad-banner',    '.ad-anchored', '.js_shelf_ads', '.ad-slot', '.antenna', '.xrail-content',    '.advertisement__leaderboard', '.ad-leaderboard', '.trc_rbox_outer', '.ks-recommended',    '.article-da', 'div.sponsored-stories-component', 'div.addthis-smartlayers',    'div.article-adsponsor', 'div.signin-prompt', 'div.article-bumper', 'div.video-placeholder',    'div.top-ad-container', 'div.header-ad', 'div.ad-unit', 'div.demo-block', 'div.OUTBRAIN',    'div.ob-widget', 'div.nwsrm-wrapper', 'div.announcementBar', 'div.partner-resources-block',    'div.arrow-down', 'div.m-ad', 'div.story-interrupt', 'div.taboola-recommended',    'div.ad-cluster-container', 'div.ctx-sidebar', 'div.incognito-modal', '.OUTBRAIN', '.subscribe-button',    '.ads9', '.leaderboards', '.GoogleActiveViewElement', '.mpu-container', '.ad-300x600', '.tf-ad-block',    '.sidebar-ads-holder-top', '.ads-one', '.FullPageModal__scroller',    '.content-ads-holder', '.widget-area', '.social-buttons', '.ac-player-ph',    /* Other: */    'script', 'iframe', 'video', 'aside#sponsored-recommendations', 'aside[role="banner"]', 'aside',    'amp-ad', 'span[id^=ad_is_]', 'div[class*="indianapolis-optin"]', 'div[id^=google_ads_iframe]',    'div[data-google-query-id]', 'section[data-response]', 'ins.adsbygoogle', 'div[data-google-query-id]',    'div[data-test-id="fullPageSignupModal"]', 'div[data-test-id="giftWrap"]' ];    for(let i in selectors) {
           let nodesList = document.querySelectorAll(selectors[i]);        for(let i = 0; i < nodesList.length; i++) {
               let el = nodesList[i];            if(el && el.parentNode)                el.parentNode.removeChild(el);        }    }})();

书签14：重启浏览器

仅适用于基于 Chrome 的浏览器。只需使用 chrome://restart/ 作为 URL 制作一个书签即可。当您单击它时，它将重新启动您的浏览器。

在这篇博客中，一共提到了14个超级实用的Web开发人员书签，为我们的工作和学习带来了许多便利和效率提升。这些书签不仅仅是简单的浏览器书签，更是嵌入了精巧的JavaScript代码，能够在我们访问的页面上执行各种功能。

通过本文，我们还学到了如何制作自己的书签，以及在书签中需要注意的一些限制和最佳实践。这些书签不仅为Web开发人员提供了方便，同时也展示了JavaScript在浏览器环境中的强大应用。

无论是提高开发效率、优化页面体验，还是解决日常工作中的小问题，这些书签都为我们打开了一扇通往Web开发新境界的大门。在未来的工作中，将它们纳入日常工作流程，相信会为我们的工作带来更多的便利和创造力。希望大家能够尝试使用这些书签，发现更多有趣的功能，让Web开发之旅变得更加轻松愉快！

如果这些书签为您带来了便利并让您觉得好用，请不要犹豫，欢迎分享到评论区与大家一同交流。同时，如果您还有其他好用的书签，也欢迎在评论中分享，让我们共同丰富Web开发者的工具箱。在互相分享的过程中，我们可以不断学习，发现更多有趣和实用的功能，为整个Web开发社区贡献一份力量。期待您的分享与交流！

📚 探索未知领域：Web开发人员必备的14个超级书签！ 🌐✨

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件