Chrome拡張機能 – テックメモ

2024-08-212024-08-28

Chrome拡張機能 uAutoPagerizeのセパレータをカスタマイズ

セパレータは有効にしたいけど､もう少しシンプルにしたかったので｡

{
  "manifest_version": 3,
  "name": "BackgroundCSS",
  "version": "1",
  "background": {"service_worker": "style.js"},
  "permissions": ["tabs","scripting"],
  "host_permissions": ["<all_urls>"]
}

{

"manifest_version": 3,

"name": "BackgroundCSS",

"version": "1",

"background": {"service_worker": "style.js"},

"permissions": ["tabs","scripting"],

"host_permissions": ["<all_urls>"]

}

chrome.tabs.onUpdated.addListener(function(tabId, info, tab) { 
  if (tab.url.startsWith("chrome") || tab.url.startsWith("edge")) return;
  if (info.status === 'complete') {
    chrome.scripting.executeScript({
      target: {tabId: tab.id},
      func: () => {
        if (document.head) {
          var e = document.createElement('style');
          e.textContent = [
          ".autopagerize_page_info_inner{display:none;}",
          ".autopagerize_page_info{border-color:#ccc !important;}"
          ].join("\n");
          document.head.insertAdjacentElement('afterbegin', e);
        }
      }
    });
  }
});

chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {

if (tab.url.startsWith("chrome") || tab.url.startsWith("edge")) return;

if (info.status === 'complete') {

chrome.scripting.executeScript({

target: {tabId: tab.id},

func: () => {

if (document.head) {

var e = document.createElement('style');

e.textContent = [

".autopagerize_page_info_inner{display:none;}",

".autopagerize_page_info{border-color:#ccc !important;}"

].join("\n");

document.head.insertAdjacentElement('afterbegin', e);

}

});

}

});

2024-08-012024-08-01

Chrome拡張タブのタイトル、URL取得をalert表示

chrome.action.onClicked.addListener((tab) => {

  if (tab.url.startsWith("chrome")) return;
  //chrome.scripting.executeScriptを使用時、
  //これがないと"Cannot access a chrome:// URL"になる場合あり

  let tabTitles = "";

  chrome.tabs.query({currentWindow: true }, (tabs) => {

    for (let i = 0; i < tabs.length; i++) {
      tabTitles += tabs[i].title + "," + tabs[i].url;
    }
　　//chrome.tabs.queryは非同期なので、chrome.tabs.query
　　//のコールバック外だとtabTitlesが空のまま
   //alertはchrome.scripting.executeScriptが必要
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: (titles) => {
        alert(titles);
      },
      args: [tabTitles]
    });
  }); 
});

chrome.action.onClicked.addListener((tab) => {

if (tab.url.startsWith("chrome")) return;

//chrome.scripting.executeScriptを使用時、

//これがないと"Cannot access a chrome:// URL"になる場合あり

let tabTitles = "";

chrome.tabs.query({currentWindow: true }, (tabs) => {

for (let i = 0; i < tabs.length; i++) {

tabTitles += tabs[i].title + "," + tabs[i].url;

}

　　//chrome.tabs.queryは非同期なので、chrome.tabs.query

　　//のコールバック外だとtabTitlesが空のまま

//alertはchrome.scripting.executeScriptが必要

chrome.scripting.executeScript({

target: { tabId: tab.id },

func: (titles) => {

alert(titles);

args: [tabTitles]

});

2024-07-25

Chrome拡張選択タブを新しいウィンドウへ

{
  "manifest_version": 3,
  "name": "TabsToWindow",
  "version": "1.0",
  "background": {
    "service_worker": "script.js"
  },
  "permissions": [
    "tabs",
    "windows"
  ],
  "commands": {
    "cmd": {
      "suggested_key": {
        "default": "Alt+Shift+G"
      },
      "description": "TabsToWindow"
    }
  }
}

{

"manifest_version": 3,

"name": "TabsToWindow",

"version": "1.0",

"background": {

"service_worker": "script.js"

"permissions": [

"tabs",

"windows"

"commands": {

"cmd": {

"suggested_key": {

"default": "Alt+Shift+G"

"description": "TabsToWindow"

}

chrome.commands.onCommand.addListener(function (command) {
  if (command === 'cmd') {
    chrome.tabs.query({highlighted: true, currentWindow: true}, tabs => {
      const tabIds = tabs.map(tab => tab.id);
      chrome.windows.create({tabId: tabIds[0], type: 'normal'}, newWindow => {
        if (tabIds.length > 1) {
          chrome.tabs.move(tabIds.slice(1), {windowId: newWindow.id, index: -1});
        }
      });
    });
  }
});

chrome.commands.onCommand.addListener(function (command) {

if (command === 'cmd') {

chrome.tabs.query({highlighted: true, currentWindow: true}, tabs => {

const tabIds = tabs.map(tab => tab.id);

chrome.windows.create({tabId: tabIds[0], type: 'normal'}, newWindow => {

if (tabIds.length > 1) {

chrome.tabs.move(tabIds.slice(1), {windowId: newWindow.id, index: -1});

}

});

}

});

2023-09-23

Chrome拡張特定の文字が含まれるタブを自動で閉じる

script.jp

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    if (tab.title.includes("アラート!")) {
        chrome.tabs.remove(tabId);
    }
  }
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {

if (changeInfo.status === 'complete') {

if (tab.title.includes("アラート!")) {

chrome.tabs.remove(tabId);

}

});

manifest.json

{
  "manifest_version": 3,
  "name": "AutoCloseTab",
  "version": "1.0",
  "permissions": ["tabs"],
  "background": {
    "service_worker": "script.js"
  }
}

{

"manifest_version": 3,

"name": "AutoCloseTab",

"version": "1.0",

"permissions": ["tabs"],

"background": {

"service_worker": "script.js"

}

2023-08-232023-11-29

Chrome拡張機能 Youtube LiveにCSS

コメントが見づらかったので。CSS当てている場所は適当｡

manifest.json

{
  "manifest_version": 3,
  "name": "MyCSS",
  "version": "0.0.1",
  "content_scripts":[
    {
      "matches": ["https://www.youtube.com/watch?v=*"],
      "css": ["style.css"]
    }
  ]
}

{

"manifest_version": 3,

"name": "MyCSS",

"version": "0.0.1",

"content_scripts":[

{

"matches": ["https://www.youtube.com/watch?v=*"],

"css": ["style.css"]

}

]

}

style.css

* {
--ytd-watch-flexy-chat-max-height:830px;
}

* {

--ytd-watch-flexy-chat-max-height:830px;

}

この書き方の問題は一度リロードが必要になってしまうこと｡リロードしなくてもCSSが当たるようする｡

{
  "manifest_version": 3,
  "name": "BackgroundCSS",
  "version": "1",
  "background": {"service_worker": "style.js"},
  "permissions": ["tabs","scripting"],
  "host_permissions": ["https://www.youtube.com/"]
}

{

"manifest_version": 3,

"name": "BackgroundCSS",

"version": "1",

"background": {"service_worker": "style.js"},

"permissions": ["tabs","scripting"],

"host_permissions": ["https://www.youtube.com/"]

}

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);
      }
    });
  }
});

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);

}

});

}

});

サイトによっては以下のような書き方でも当たる｡

{
  "manifest_version": 3,
  "name": "MyCSS",
  "version": "1",
  "content_scripts":[
    {
      "matches": ["https://www.notion.so/*"],
      "js": ["style.js"]
    }
  ]
}

{

"manifest_version": 3,

"name": "MyCSS",

"version": "1",

"content_scripts":[

{

"matches": ["https://www.notion.so/*"],

"js": ["style.js"]

}

]

}

window.addEventListener('load', function() {
var e = document.createElement('style');
e.textContent = "*{font-family:'Roboto','Meiryo' !important;}";
document.head.insertAdjacentElement('afterbegin', e);
}, false);

window.addEventListener('load', function() {

var e = document.createElement('style');

e.textContent = "*{font-family:'Roboto','Meiryo' !important;}";

document.head.insertAdjacentElement('afterbegin', e);

}, false);

2022-06-022022-06-03

Chrome拡張機能右クリックから検索

選択した文字列をブログ検索

{
  "manifest_version": 3,
  "name": "RightClick",
  "version": "0.0.2",
  "background": {
    "service_worker": "script.js"
  },
  "permissions": [
    "tabs",
    "contextMenus"
  ]
}

{

"manifest_version": 3,

"name": "RightClick",

"version": "0.0.2",

"background": {

"service_worker": "script.js"

"permissions": [

"tabs",

"contextMenus"

]

}

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.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は入れるとダメ。

2022-02-282024-05-03

Chrome拡張機能 Google検索にfavicon2

今は標準で表示されるので､不使用｡

あまりjQueryを聞かなくなったので。脱jQuery版。

{
  "manifest_version": 3,
  "name": "GoogleSearch Add Favicons",
  "version": "0.0.2",
  "content_scripts":[
    {
      "matches": ["https://www.google.co.jp/search?*"],
      "js": ["script.js"]
    }
  ]
}

{

"manifest_version": 3,

"name": "GoogleSearch Add Favicons",

"version": "0.0.2",

"content_scripts":[

{

"matches": ["https://www.google.co.jp/search?*"],

"js": ["script.js"]

}

]

}

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);
  }
});

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);

}

});

2022-02-112023-03-25

Chrome拡張機能不要なタブを閉じる

特定の文字列を含むタブ+右側のタブをショートカットで閉じる。

Chromeのタブ操作はほぼショートカットなのだけど、使用頻度の高い「右側のタブを閉じる」だけマウス操作になってしまっており不便だった。

manifest.json

{
  "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"
    }
  }
}

{

"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

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;
                }
            }
        });
    }
});

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で置き換えているが通常は不要。

WinGetTitle, this_title, A
If(RegExMatch(this_title, "Google Chrome") > 0)
{
  Send, !+{E} ; Chrome拡張
}

WinGetTitle, this_title, A

If(RegExMatch(this_title, "Google Chrome") > 0)

{

Send, !+{E} ; Chrome拡張

}

<!z::Send, !+{Z} ; Chrome拡張

1	<!z::Send, !+{Z} ; Chrome拡張

Chrome側のショートカットの設定は、
︙＞その他ツール＞拡張機能＞≡＞キーボードショートカット
CoseRightTabs：Alt+Shift+Z
CloseTabs：Alt+Shift+E

2022-02-112022-02-13

Chrome拡張機能タブのタイトル取得

アイコンをクリックして実行するタイプ

manifest.json

{
  "manifest_version": 2,
  "name": "Tabs",
  "version": "0.0.1",
  "browser_action": { },
  "background": {
    "scripts": ["script.js"],
    "persistent": false
  },
  "permissions": [
    "tabs"
  ]
}

{

"manifest_version": 2,

"name": "Tabs",

"version": "0.0.1",

"browser_action": { },

"background": {

"scripts": ["script.js"],

"persistent": false

"permissions": [

"tabs"

]

}

script.js

chrome.browserAction.onClicked.addListener(
    function () {
        chrome.tabs.query({}, tabs => {
            for(let i=0; i<tabs.length; i++){
                alert(tabs[i].title);
            }
        });
    }
);

chrome.browserAction.onClicked.addListener(

function () {

chrome.tabs.query({}, tabs => {

for(let i=0; i<tabs.length; i++){

alert(tabs[i].title);

}

});

}

);

アクティブなウィンドウだけの場合

    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);
            }
        });
    }

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);

}

});

}

2020-05-042020-05-04

Chrome拡張機能新規タブにデータを渡す

右クリックにメニューを表示し、クリックするとアクティブタブのタイトルとURLを新しいタブ(ローカルhtml)に渡すサンプル。

フォルダには下記4つのファイルとjquery-3.5.0.min.jsを入れてある。

manifest.json

{
	"manifest_version": 2,
	"name": "右クリック",
	"description": "",
	"version": "1.0",
	"background" : {
		"scripts" : ["background.js"]
	},
	"permissions" : ["contextMenus","tabs","storage"]
}

{

"manifest_version": 2,

"name": "右クリック",

"description": "",

"version": "1.0",

"background" : {

"scripts" : ["background.js"]

"permissions" : ["contextMenus","tabs","storage"]

}

background.js

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);
		});
	}
});

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

<p id="msg"></p>
<script src="jquery-3.5.0.min.js"></script>
<script src="test.js"></script>

test.js

$(window).on('load',function(){
  chrome.storage.sync.get(['title', 'url'], (items) => {
    alert(items.title);
    $("#msg").text(items.url);
  });
});

$(window).on('load',function(){

chrome.storage.sync.get(['title', 'url'], (items) => {

alert(items.title);

$("#msg").text(items.url);

});