Chromeでの作業効率を一気に高めたいなら、ブックマークレットの活用が非常に有効です。
拡張機能を入れなくても、ワンクリックで便利な機能を実行できるのが魅力です。
この記事では、実務でもすぐ使える便利なブックマークレットを5つ厳選して紹介します。
ブックマークレットとは？
ブックマークレットとは、ブックマークとして保存できるJavaScriptコードのことです。
クリックするだけで、現在開いているページに対して処理を実行できます。
ブックマークレットの設定方法
Chromeでブックマークレットを使うには、通常のブックマークとして登録します。
ブックマークのURL欄にJavaScriptコードを貼り付けるだけで、すぐに利用できます。
以下の手順で設定できます。
- Chromeのブックマークバーを表示する
- 右クリックして「ページを追加」を選択
- 名前は任意で入力
- URL欄にブックマークレットのコードを貼り付ける
- 保存してクリックすれば実行可能
Chromeで使える便利なブックマークレット5選
選択した範囲をGoogle検索
選択したテキストをそのままGoogle検索できるブックマークレットです。
調べたい単語やエラー文を即座に検索できるため、開発効率が向上します。
javascript:(function(){window.open('https://www.google.com/search?q='+encodeURIComponent(window.getSelection()));})();選択した範囲をGoogle翻訳（英語→日本語）
英語の文章を選択して、日本語にすぐ翻訳できるブックマークレットです。
海外ドキュメントやエラーメッセージの理解がスムーズになります。
javascript:(function(){window.open('https://translate.google.com/?sl=en&tl=ja&text='+encodeURIComponent(window.getSelection()));})();開いているページの目次を表示
ページ内の見出し（h1〜h6）を抽出して目次として表示するブックマークレットです。
長い記事や仕様書を読む際に、全体構造を素早く把握できます。
javascript:(function(){function headingCheck(){let headingElements=document.querySelectorAll('h1, h2, h3, h4, h5, h6');headingElements.forEach((element,index)=>{let elementId=element.getAttribute('id');if(!elementId){element.setAttribute('id',`heading${index}`);}tableItemDisplay(element);});}function tableContentDisplay(){const removeTag=document.getElementsByClassName('tableContent');if(removeTag.length!==0){removeTag.item(0).remove();};const bodyElement=document.getElementsByTagName('body').item(0);let tableContent=document.createElement('div');tableContent.classList.add('tableContent');tableContent.style.position='fixed';tableContent.style.zIndex='9999';tableContent.style.top="70px";tableContent.style.right="0";tableContent.style.width="100%";tableContent.style.maxWidth="350px";tableContent.style.color='#333';tableContent.style.backgroundColor='#fff';tableContent.style.border='3px solid #333';tableContent.innerHTML=`<ul></ul><div class="close_btn">Close</div>`;bodyElement.appendChild(tableContent);const close_btn=document.querySelectorAll('.tableContent .close_btn').item(0);close_btn.style.cursor='pointer';close_btn.style.boxSizing='border-box';close_btn.style.width='100%';close_btn.style.padding='12px';close_btn.style.fontSize='18px';close_btn.style.textAlign='center';close_btn.style.lineHeight='1';close_btn.style.color='#fff';close_btn.style.backgroundColor='#333';close_btn.addEventListener('click',function(){tableContent.style.display='none';});}function tableItemDisplay(element){const tableContent=document.querySelectorAll('.tableContent ul').item(0);tableContent.style.overflow='auto';tableContent.style.maxHeight='500px';tableContent.style.margin='0';tableContent.style.padding='5px 0';let tableItem=document.createElement('li');tableItem.style.display='block';tableItem.style.boxSizing='border-box';tableItem.style.width='100%';tableItem.style.minWidth='300px';tableItem.style.fontSize='12px';tableItem.style.fontWeight='bold';tableItem.style.backgroundColor='#fff';let tagName=element.tagName;let tagNumber=tagName.replace('H','');tableItem.style.padding=`5px 10px 5px ${10*Number(tagNumber)}px`;tableItem.innerHTML=`<a href="#${element.getAttribute('id')}">- ${element.innerText}</a>`;tableContent.appendChild(tableItem);}tableContentDisplay();headingCheck();})();広告画像を非表示にする
ページ内の画像要素を非表示にして、視認性を高めるブックマークレットです。
広告やノイズを排除して、テキストに集中できます。
javascript:(function(){document.querySelectorAll('img').forEach(img=>img.style.display='none');})();ページ内の要素にアウトラインを付与する
ページ内のすべての要素に枠線を付けて、レイアウト構造を可視化するブックマークレットです。
HTML構造の確認やデバッグ作業に役立ちます。
javascript:(function(){document.querySelectorAll('*').forEach(el=>el.style.outline='1px solid red');})();まとめ
ブックマークレットを使うことで、Chromeの作業効率は大きく向上します。
どれも数秒で導入できるので、日々の開発や調査にぜひ取り入れてみてください。
なめこオンラインでは、Web開発初学者向けのコンテンツを発信しています！
ぜひ、多くの方にシェアいただけますと嬉しいです！
コメント