Chrome拡張機能開発 選択中の文字列を取得して、クリップボードにコピーするサンプルコード
選択中の文字列を取得し、クリップボードにコピーする
このサンプルでは、文字列を選択した状態で「右クリック」し、「選択中の文字列をコピー」を押すとその文字列をクリップボードにコピーします。
やっていることは ctrl+c と変わりませんが、これを利用することで、取得した文字列を加工したりすることができます。
サンプルファイルのダウンロード
サンプルコード
manifest.json
{ "manifest_version": 2, "name": "copy_selected", "description": "copy_selected", "version": "1.0", "background" : { "scripts" : ["background.js"] }, "permissions" : [ "contextMenus", "clipboardRead" ], "icons" : { "48" : "icons/icon48.png" } }
background.js
//コンテクストメニュー 右クリック時に出る表示のやつ chrome.contextMenus.create({ "title" : "選択中の文字列をコピー", "type" : "normal", "contexts" : ["selection"], "onclick" : copytext() }); //選択中の文字列を取得する関数 function copytext(info,tab){ return function(info,tab){ var selection_text = info.selectionText; console.log(selection_text); //取得した文字列をデバッグに送る saveToClipboard(selection_text); //取得した文字列をクリップボードにコピーする関数に送る } } //選択中文字列をクリップボードに入れる function saveToClipboard(str) { var textArea = document.createElement("textarea"); document.body.appendChild(textArea); textArea.value = str; textArea.select(); document.execCommand("copy"); document.body.removeChild(textArea); }
keyword : Chrome extension
Chrome拡張機能開発 contextMenus（コンテクストメニュー）についてのメモ
contextMenus（コンテクストメニュー）とは
右クリックした時に出てくるリストのこと。
色々と検証
どうやら、コンテクストメニューをつかう場合は、.htmlではなくmanifest.jsonの「”background”」でjsファイルを指定しないといけないらしい。
例
manifest.json
{ "manifest_version": 2, "name": "action_button_sample", "description": "action_button_sample", "version": "1.0", "background" : { "scripts" : ["background.js"] }, "permissions" : [ "contextMenus", "http://*/*", "https://*/*" ], "icons" : { "16" : "icons/icon48.png" } }
background.js
chrome.contextMenus.create({ "title" : "コンテクストメニューのサンプル", "type" : "normal", "contexts" : ["all"], "onclick" : function(info){ var url = "https://www.google.co.jp/" chrome.tabs.create({ url : url}); } });
参考にしたページ
Google Chrome Extensionを作ってみた-その7- ｜ DevelopersIO
上記のページのサンプルでは動かず、
chrome extensionsでcontextMenusを使ってみるテスト1 - tweeeetyのぶろぐ的めも
上記のページのやり方では動いた。
2019.04.22 chrome バージョン: 73.0.3683.103（Official Build） （64 ビット）での場合での検証。
Chrome拡張機能開発 chrome.browserAction アクションボタンのサンプル
概要
chrome機能拡張 chrome.browserAction アクションボタンのサンプル
ボタンを押すと console.log('Pushed!');//For debugging が1回実行されるだけのファイル。
サンプルファイルのダウンロード
ファイル構成
コード
manifest.json
{ "manifest_version": 2, "name": "action_button_sample", "description": "action_button_sample", "version": "1.0", "author":"My Name", "permissions": ["tabs"], "browser_action": { "default_icon": "icons/icon48.png", "default_title": "action_button_sample", "default_popup": "popup.html" }, "icons": { "48": "icons/icon48.png" } }
popup.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery-3.4.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/popup.js"></script> </head> <body style="min-width:250px"> <input type="button" id="btn" value="TEST BUTTON" /><br> </body> </html>
style.css
input{ font-size: 18px; color: #555; padding: 0px; height: 40px; grid-area: result; width: 95%; }
popup.js
window.onload = function () { //Run when opened } //Aboutボタン（常に有効） $(function(){ $("#btn").click(function(){ //Executed when the button is pressed console.log('Pushed!');//For debugging }); }); //debugging url (change "mocolllbmbndodjhaiochlcgpdoabdom" to your chrome Extension ID //chrome-extension://mocolllbmbndodjhaiochlcgpdoabdom/popup.html
FireFox Addon開発入門のメモ JavaScript で API で行うプラグイン開発
Chrome機能拡張の移植
最近のFireFoxは中身がChromiumベースなので、chromeと非常に似ている。
機能拡張もほとんどそのまま移植が可能だが、一部APIでは互換性の問題があるので、そういう点をメモしておきます。
一時的なアドオンの読み込み
chromeと違ってFireFoxはメニューバーから拡張機能開発の場所にアクセスできない。なので以下からアクセスする。
about:debugging
上記のアドレスを開くと開発ツールデバッカーが開く。
なおここでは「デバッグ」が使えるの見やすくて便利である。
タブの情報を取得する「chrome.tabs.getSelected」は使えない
chrome.tabs.getSelected はfirefoxでサポートされていないので変わりに「 browser.tabs.query 」を使う必要があります。
下記のページにあるサンプルコードが便利です
chromeのままで良いらしい
chrome.tabs.create({url: 'https://karupoimou.hatenablog.com/'});
の様に、chromeのままでも使えます。chromeの部分を「browser」に変えても使えます。
なお、chromeでは「browser」は使えないみたいです。
作ったアドオンを公開する
上記のページで公開できる。
なお無料。
審査は15分ぐらいで通りました。おそらく半自動で行われているようです。
最初の審査以外は自動の様で、アップロードすると即反映されるみたいです。
なお公開には FireFoxのアカウントが必要です。
はてな記法でコードボックスを書く方法のメモ
はてなブログでコードボックスを使いたい
はてなブログでコードボックスを使うのは「はてな記法」を使うのが簡単です。
はてな記法の使い方
はてな記法は「編集モード」を変えることで使えるようになります。
help.hatenablog.com
コピペ用
>|| ||< >|| ここにコードを書く ||<
>|python| ||< >|python| ここにコードを書く ||<
記載方法
実際の記載時は、以下の様に書けばOKです。
コードボックスのサンプル
import requests import yaml payload = {'out': 'yaml'} r = requests.get('https://api.syosetu.com/novelapi/api/', params=payload).text print(r)
面倒な人は『単語登録』がオススメ
「>||」を「＞」として 「||<」を「＜」として 「>|| ||<」 を「ソース」
の様にして登録しておくことをオススメします。
これで二度と手で打ち込む必要がなくなります。
Tips
>>|aaaa|
aaaa の所に言語名を書くとハイライトされる。
なお大文字を使うとハイライトされなくなるので、言語名は必ず小文字で書く。
コードボックスのデザインはcssで指定
ソースコードをダブルクリックで全選択するやつ
コードボックスのどこかをダブルクリックするだけで、ソースコードを全部選択できるスクリプトです。
当ブログでも使わせてもらっています。
使用方法は簡単。
スクリプトを「設定」ー「デザイン」ー「フッター」の箇所にコピペするだけです。
