• 締切済み

googleスライドのhtmlについて

<!DOCTYPE html> <html> <head> <title>Copy Text to Clipboard</title> </head> <body> <textarea id="myTextarea" rows="4" cols="50">chrome-extension://gndmhdcefbhlchkhipcnnbkcmicncehk/manifest.json</textarea> <br> <button onclick="copyToClipboard()">コピー</button> <script> function copyToClipboard() { var text = document.getElementById("myTextarea").value; navigator.clipboard.writeText(text); } </script> </body> </html> みたいなhtmlを書いたのですが、何故かうまくいきません 多分半分くらい間違ってるんでどうしたらいいのか教えて下さい!! ちなみに私がしたいのは"コピーする"ボタンをおしたらコピーできるみたいな感じのやつです

みんなの回答

回答No.1

おそらく、このコードを実行するためにはChrome拡張機能としてインストールする必要があります。単純にHTMLファイルとしてローカルに保存しても、拡張機能の許可なしにはクリップボードにアクセスできないため、動作しません。 もしあなたがChrome拡張機能として実装したい場合は、以下の手順に従ってください。 ①マニフェストファイル(manifest.json)を作成する。例えば、以下のような内容で作成できます。 { "manifest_version": 2, "name": "Copy To Clipboard Extension", "version": "1.0", "description": "Copy text to clipboard with one click", "permissions": ["clipboardWrite"], "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] } ②content.jsファイルを作成する。以下のコードを貼り付けてください。 function copyToClipboard() { var text = document.getElementById("myTextarea").value; navigator.clipboard.writeText(text); } var button = document.createElement("button"); button.innerText = "コピーする"; button.onclick = copyToClipboard; document.body.appendChild(button); ③Google Chromeの拡張機能ページ(chrome://extensions/)にアクセスし、「デベロッパーモード」を有効にします。 ④「パッケージ化されていない拡張機能を読み込む」を選択し、先程作成したフォルダを選択します。 これで、任意のWebページ上に「コピーする」ボタンが表示され、クリックすることでテキストがクリップボードにコピーされます。

関連するQ&A