chrome拡張で特定のページのボタンを自動クリック

Question

前提・実現したいこと

指定の時間になったら指定のページに遷移し、そのページの指定したボタンをクリックする機能を作成中です。

発生している問題・エラーメッセージ

Uncaught (in promise) Error: Cannot access contents of url "". Extension manifest must request permission to access this host.

Uncaught TypeError: Cannot read properties of undefined (reading 'create')
2つ目のエラーに関してはchrome.scripting.executeScriptでアクセスができずnullになっているからだと考えています。この解釈が間違っていればご指摘お願いいたします。

該当のソースコード

{
	"name": "自動クリック",
	"manifest_version": 3,
	"version": "0.1",
	"permissions": ["activeTab","scripting","tabs"],
	"background": {
		"service_worker": "content.js"
	},
	"content_scripts": [
		{
		  "matches": [ "<all_urls>" ],
		  "js": ["content.js"]
		}
	  ],
	  "host_permissions":[
        "http://*/*",
		"https://*/*"
	  ],
   
	"action": {}
}

function click() {
    
    document.querySelector(".cart-button").click();
    }

const start=new Date(2021,9,24,21,00,00); 
const Timer=setInterval(Time,1000);
function Time(){
if(start<= new Date()){
chrome.tabs.create({url: "https://ticket.rakuten.co.jp/music/jpop/RTJTAAC/"}, tab => {
  
    chrome.scripting.executeScript(
        {
            target: {tabId: tab.id},
            function:()=>{
                return click;
            }
        });
});

  clearInterval(Timer);
}
}

試したこと

"host_permissions"のところに実行したいページのurlを入れたりしましたが駄目でした。
また、chrome.permissions.requestを使いましたが駄目でした。

Answer 1

まずmanifest.jsonがおかしいです。作ったスクリプトはbackgroundで動くものですから、"content_scripts" の項目は不要なはずです。

chrome.tabs.create() に指定したコールバックは、タブが作られた瞬間に呼ばれて、タブの中身はまだロードされていません。よって、URLが "" とみなされます。なので、chrome.tabs.create() のコールバックの中でさらに
chrome.tabs.onUpdated.addListener() を呼んでページのロードを待ち、そのコールバックの中でchrome.scripting.executeScript()を呼びます。

            function:()=>{
                return click;
            }

プロパティがおかしいです。func: click でしょう。