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

});