Chrome拡張機能のContentScriptからプロンプトを自作プロンプトに置き換えたい

Question

###前提・実現したいこと
Google Chrome拡張機能のContentScriptから該当ページのプロンプトを自作プロンプトに置き換えたい

###試したこと
promptを関数で作って置き換えれば使ってくれると聞いたのですが以下のようにしても元のプロンプトがでてしまいます

###ソースコード

function prompt(msg="",val="") {
	$("body").append(
		"<div id='dialog'>"
			+"<div style='position:absolute;top:0px;left:0px;width:"+$(document).width()+"px;background-color:#000;opacity:0.5;height:"+$(document).height()+"px'></div>"
			+"<div style='position:absolute;border-radius:6px 6px 6px 6px;left:75px;top:150px;width:500px;height:100px;background-color:#FFF;box-shadow:6px 6px 6px rgba(0,0,0,0.4);padding:10px;'>"
				+"<p>"+msg+"</p>"
				+"<input type='text' value='"+val+"'>"
				+"<button id='ok'>OK</button>"
			+"</div>"
		+"</div>"
	);
	$("div#dialog button#ok").click(function() {
		var val = $("div#dialog input").val();
		if (val) {
			$("div#dialog").remove();
			return val
		}else{
			$("div#dialog>div:eq(1)").append("<p>入力してください</p>")
		}
	})
}

Answer 1

teratail のみ変える例です

manifest.json にこれを追加します

  "content_scripts": [
    {
      "matches": ["https://teratail.com/*"],
      "js": ["content_script.js"],
      "run_at" :"document_end"
    }
  ],
  "web_accessible_resources": [
    "script.js"
  ]

[content_script.js]

insertScript({src: "https://code.jquery.com/jquery-3.2.1.min.js"})
insertScript({src: chrome.runtime.getURL("script.js")})

function insertScript({src, innerHTML}){
	const script_elem = document.createElement("script")
	script_elem.async = false
	if(src){
		script_elem.src = src
	}else if(innerHTML){
		script_elem.innerHTML = innerHTML
	}
	document.head.append(script_elem)
}

[script.js]

!function($){
	
	window.prompt = function(){
		console.log("prompt が呼ばれました", $.fn.jquery)
	}
	
}($.noConflict(true))

jQuery はすぐに noConflict することで元のページで使ってる jQuery があった場合にバージョンが変わっておかしなことにならないようにしています

元のプロンプトがでる理由はすでにある回答にあるように、content_script を実行する空間とページ内の JavaScript が実行する空間が違うからページ内の prompt は置き換えられてないからです

Answer 2

確かに window.prompt を自作の関数で置き換えればよいので、該当ページ上で直接ご呈示のコードを実行すれば、目的は達成できるかと思います。

ただし、 Google Chrome 拡張機能の Content Script から実行する場合、同じ方法で直接 window.prompt を置き換えることはできません。なぜなら、名前空間の汚染やセキュリティ上の欠陥となることを避けるため、全ての Content Script は "isolated world" と呼ばれる 該当ページから隔離された JavaScript コンテキスト上 で動作しており、該当ページの JavaScript 変数などに直接アクセスすることが不可能になっているからです。

参考: Content Scripts - Execution environment

ではどうするかというと、 Content Script から該当ページへのアクセスが許されているのは DOM 操作だけなので、ご呈示のコードに次のような行を追加し、 <script>要素として DOM 的に該当ページへと差し込んでやれば良いのではないでしょうか。

var s = document.createElement('script')
s.textContent = prompt.toString();
document.body.appendChild(s);

尚、代替 prompt() 実装の中で jQuery が使用されているようですが、もしも該当ページ自体に jQuery が読み込まれていない場合、 (仮に Content Script の 1 つとして拡張機能自身に持たせたとしても) 上記と同様の理由で jQuery が使用できず動作しないと思います。同じようにして <script> 要素を別途追加してあげてください。