自分用のメモです。内容が間違っていたり、作りかけで動作しないコードなどあるのでご注意ください。
script.jp
|
1 2 3 4 5 6 7 |
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (changeInfo.status === 'complete') { if (tab.title.includes("アラート!")) { chrome.tabs.remove(tabId); } } }); |
manifest.json
|
1 2 3 4 5 6 7 8 9 |
{ "manifest_version": 3, "name": "AutoCloseTab", "version": "1.0", "permissions": ["tabs"], "background": { "service_worker": "script.js" } } |
コメントが見づらかったので。CSS当てている場所は適当｡
manifest.json
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "manifest_version": 3, "name": "MyCSS", "version": "0.0.1", "content_scripts":[ { "matches": ["https://www.youtube.com/watch?v=*"], "css": ["style.css"] } ] } |
style.css
|
1 2 3 |
* { --ytd-watch-flexy-chat-max-height:830px; } |
この書き方の問題は一度リロードが必要になってしまうこと｡リロードしなくてもCSSが当たるようする｡
|
1 2 3 4 5 6 7 8 |
{ "manifest_version": 3, "name": "BackgroundCSS", "version": "1", "background": {"service_worker": "style.js"}, "permissions": ["tabs","scripting"], "host_permissions": ["https://www.youtube.com/"] } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
chrome.tabs.onUpdated.addListener(function(tabId, info, tab){ if (info.status === 'complete' && tab.url.indexOf('youtube.com/watch') !== -1) { chrome.scripting.executeScript({ target: {tabId: tab.id}, func: () => { var e = document.createElement('style'); e.textContent = "*{--ytd-watch-flexy-chat-max-height:830px;}"; document.head.insertAdjacentElement('afterbegin', e); } }); } }); |
サイトによっては以下のような書き方でも当たる｡
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "manifest_version": 3, "name": "MyCSS", "version": "1", "content_scripts":[ { "matches": ["https://www.notion.so/*"], "js": ["style.js"] } ] } |
|
1 2 3 4 5 |
window.addEventListener('load', function() { var e = document.createElement('style'); e.textContent = "*{font-family:'Roboto','Meiryo' !important;}"; document.head.insertAdjacentElement('afterbegin', e); }, false); |
選択した文字列をブログ検索
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "manifest_version": 3, "name": "RightClick", "version": "0.0.2", "background": { "service_worker": "script.js" }, "permissions": [ "tabs", "contextMenus" ] } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
chrome.runtime.onInstalled.addListener(function () { chrome.contextMenus.create({ id: "parent", title: "ブログ検索", contexts: ["selection"] }); }); chrome.contextMenus.onClicked.addListener((info) => { if (info.menuItemId == "parent"){ let u = "https://www.google.co.jp/search?hl=ja&as_sitesearch=http://okamurax.com/&q=" + info.selectionText; chrome.tabs.create({url:u}); } }); |
chrome.contextMenus.createはonInstalled.addListenerで追加しないとエラーになる。chrome.contextMenus.onClicked.addListenerは入れるとダメ。
あまりjQueryを聞かなくなったので。脱jQuery版。
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "manifest_version": 3, "name": "GoogleSearch Add Favicons", "version": "0.0.2", "content_scripts":[ { "matches": ["https://www.google.co.jp/search?*"], "js": ["script.js"] } ] } |
|
1 2 3 4 5 6 7 8 9 10 11 |
window.addEventListener('load', function() { let elements = document.querySelectorAll('a > h3'); for (let i = 0; i < elements.length; i++) { let url = elements[i].parentElement.getAttribute('href'); let domain = url.match(/^https?:\/\/[-0-9a-z.]+/i); let fav = 'https://www.google.com/s2/favicons?domain=' + domain[0]; let img = document.createElement('img'); img.src = fav; elements[i].insertBefore(img, elements[i].firstChild); } }); |
特定の文字列を含むタブ+右側のタブをショートカットで閉じる。
Chromeのタブ操作はほぼショートカットなのだけど、使用頻度の高い「右側のタブを閉じる」だけマウス操作になってしまっており不便だった。
manifest.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "manifest_version": 3, "name": "CloseTabs", "version": "0.0.2", "background": { "service_worker": "script.js" }, "permissions": [ "tabs" ], "commands": { "close-tabs": { "suggested_key": { "default": "Alt+Shift+E" }, "description": "CloseTabs" }, "close-right-tabs": { "suggested_key": { "default": "Alt+Shift+Z" }, "description": "CloseRightTabs" } } } |
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
chrome.commands.onCommand.addListener(function (command) { if (command === 'close-tabs') { chrome.tabs.query({}, tabs => { for(let i=0; i<tabs.length; i++){ if (tabs[i].title.indexOf('アラート! - ESET Internet Security') !== -1) { chrome.tabs.remove(tabs[i].id); } } }); } else if (command === 'close-right-tabs') { chrome.tabs.query({currentWindow: true}, tabs => { let rightSide = false; for(let i=0; i<tabs.length; i++) { if (rightSide) { chrome.tabs.remove(tabs[i].id); } else { if (tabs[i].active) rightSide = true; } } }); } }); |
AutoHotkeyから呼び出して利用中。
これで「右側のタブを閉じる」がAlt+Zで実行できる。Chrome拡張のショートカットの都合で今回はAutoHotkeyで置き換えているが通常は不要。
|
1 2 3 4 5 |
WinGetTitle, this_title, A If(RegExMatch(this_title, "Google Chrome") > 0) { Send, !+{E} ; Chrome拡張 } |
|
1 |
<!z::Send, !+{Z} ; Chrome拡張 |
Chrome側のショートカットの設定は、
︙＞その他ツール＞拡張機能＞≡＞キーボードショートカット
CoseRightTabs：Alt+Shift+Z
CloseTabs：Alt+Shift+E
アイコンをクリックして実行するタイプ
manifest.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "manifest_version": 2, "name": "Tabs", "version": "0.0.1", "browser_action": { }, "background": { "scripts": ["script.js"], "persistent": false }, "permissions": [ "tabs" ] } |
script.js
|
1 2 3 4 5 6 7 8 9 |
chrome.browserAction.onClicked.addListener( function () { chrome.tabs.query({}, tabs => { for(let i=0; i<tabs.length; i++){ alert(tabs[i].title); } }); } ); |
アクティブなウィンドウだけの場合
|
1 2 3 4 5 6 7 8 |
if (command == 'xxx') { chrome.tabs.getAllInWindow(tabs => { for(let i=0; i<tabs.length; i++){ chrome.tabs.update(tabs[i].id,{selected:true}); alert(tabs[i].title); } }); } |
右クリックにメニューを表示し、クリックするとアクティブタブのタイトルとURLを新しいタブ(ローカルhtml)に渡すサンプル。
フォルダには下記4つのファイルとjquery-3.5.0.min.jsを入れてある。
manifest.json
|
1 2 3 4 5 6 7 8 9 10 |
{ "manifest_version": 2, "name": "右クリック", "description": "", "version": "1.0", "background" : { "scripts" : ["background.js"] }, "permissions" : ["contextMenus","tabs","storage"] } |
background.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
chrome.contextMenus.create({ "title" : "Bookmark", "type" : "normal", "contexts" : ["page"], "onclick" : () => { chrome.tabs.getSelected((currentTab) => { let values = { 'title':currentTab.title, 'url':currentTab.url }; chrome.storage.sync.set(values, null); chrome.tabs.create({url: "test.html"}, null); }); } }); |
test.html
|
1 2 3 |
<p id="msg"></p> <script src="jquery-3.5.0.min.js"></script> <script src="test.js"></script> |
test.js
|
1 2 3 4 5 6 |
$(window).on('load',function(){ chrome.storage.sync.get(['title', 'url'], (items) => { alert(items.title); $("#msg").text(items.url); }); }); |
以下の3つのファイルを作成し、フォルダに入れてChrome拡張のページにドラッグするだけ。
manifest.json
|
1 2 3 4 5 6 7 8 |
{ "manifest_version": 2, "name": "ブログ検索", "version": "0.0.1", "browser_action":{ "default_popup": "popup.html" } } |
script.js
|
1 2 3 4 5 6 7 |
$(document).keydown(function(e){ if(e.keyCode == 13){ chrome.tabs.create({ url: "https://www.google.co.jp/search?hl=ja&as_sitesearch=http://okamurax.com/&q=" + $("#a").val() }); } }); |
popup.html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <input type="text" id="a" /> </body> </html> |
manifest_version, name, versionは必須。
・manifest_version
2, 3を指定。
・name
任意の名前。
・version
任意のバージョン。
＊＊＊
・content_scripts / background
・content_scripts
特定のページで動作。DOMを操作できる。
content_scripts > matches
スクリプトを動作させたいURL。
content_scripts > js
動作させるスクリプト。
・background
常にバックグラウンドで動いている。
v3からbackgroundはservice_workerを指定する。
background > scripts
バックグラウンドで動作するスクリプト。
background > persistent
persistent:falseにするとEvent-Pageとなり、必要になったら動く。
バックグラウンドは非推奨。
＊＊＊
・browser_action / page_action
browser_action：全てのページでアイコン表示。
page_action：特定のページでアイコン表示。
v3からactionに統合される。
＊＊＊
・id
IDを指定。
・description
説明。
・icons
アイコンを指定。
・short_name
短縮名。
・default_locale
デフォルト言語を指定。
＊＊＊
・permissions
ChromeAPIを使う場合指定。
・permissions > contextMenus
右クリックメニューの拡張。
＊＊＊
・commands
ショートカット定義。
・options_page
オプションページを使う場合指定。
・minimum_chrome_version
Chromeの最低バージョンを指定。
・homepage_url
ホームページを指定。
・author
作成者。
・override pages
新規タブ、ブックマークマネージャ、履歴の差し替え。
・omnibox
検索ボックスの拡張。
最新版あり。
即席で作ったけどかなり活躍していて、検索結果にfaviconがないと気持ち悪くなってしまった。
script.js
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $("h3.r > a").each(function(){ var url = $(this).attr('href'); domain = url.match(/^https?:\/\/([-0-9a-z.]+)/i); var fav = "//www.google.com/s2/favicons?domain=" + domain[1]; var img = "<img src='" + fav + "'>"; $(this).parent().prepend(img); }); }); |
manifest.json
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "manifest_version": 2, "name": "Google検索にfavicon", "version": "0.0.1", "content_scripts":[ { "matches": ["https://www.google.co.jp/search?*"], "js": ["jquery-3.1.1.min.js","script.js"] } ] } |
検索結果の構造が変わった模様。
script.js
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $("a > h3").each(function(){ var url = $(this).parent().attr('href'); domain = url.match(/^https?:\/\/([-0-9a-z.]+)/i); var fav = "//www.google.com/s2/favicons?domain=" + domain[1]; var img = "<img src='" + fav + "'>"; $(this).prepend(img); }); }); |
jquery-3.1.1.min.js、manifest.json、script.jsの3つのまとめてフォルダに入れ、Chrome拡張へドラッグする。