質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

解決済

新規タブの要素に値を代入できない

jupeeze
jupeeze

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

1回答

0評価

1クリップ

211閲覧

投稿2022/05/04 07:47

前提

JavaScriptの初学者です。
ChromiumであるBrave Browserの拡張機能を作ろうとしたのですが、
思い通りの結果にならず困っております。

実現したい処理というのが、
【拡張機能を起動した時にGoogle翻訳のウェブサイト翻訳機能で現在のURLを翻訳する】
というものです。

現状の問題は、新規タブの要素に値を代入できないことです。
3パターンを試してましたが、エラーの意味がわからず行き詰まっています。
私自身の説明につたないところもあると思いますが、アドバイス頂ければと思います。

実現したいこと

  • 拡張機能を起動した時の、現在のタブのURLを取得
  • 新しいタブでGoogle翻訳ウェブサイト翻訳機能のページを開く
  • フォームに取得したURLを入力し、矢印ボタンを押す
  • Google翻訳ウェブサイト翻訳機能のページを閉じる

3つ目の 新規タブの要素に値を代入する時に、色々なエラーが起きます。

試したソースコード

JavaScript

//ソースA function ElClick(arg) { console.log(arg); let obj = window.open('https://translate.google.co.jp/?hl=ja&tab=cT&sl=en&tl=ja&op=websites '); let timer = setInterval(function () { if ($("#i44", obj.document) != undefined) { document.getElementById('i44').value = arg; obj.document.getElementsByClassName('VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ DiOXab zhBWDc Pk9dvb')[0].click(); clearInterval(timer); } }, 500); } chrome.action.onClicked.addListener((tab) => { const url = tab.url chrome.scripting.executeScript({ target: { tabId: tab.id }, function: ElClick, args: [url] }) }) //ソースB function _OnLoad() { console.log(url); document.getElementById('i44').value = url; obj.document.getElementsByClassName('VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ DiOXab zhBWDc Pk9dvb')[0].click(); } var readStateCheck = function () { if (obj.document.readyState == "complete") { _OnLoad(); } else { setTimeout(readStateCheck, 100); } } function _OnClick() { obj = window.open('https://translate.google.co.jp/?hl=ja&tab=cT&sl=en&tl=ja&op=websites '); setTimeout(readStateCheck, 100); } chrome.action.onClicked.addListener((tab) => { url = tab.url chrome.scripting.executeScript({ target: { tabId: tab.id }, function: _OnClick }) }) //ソースC function ElClick(arg) { let obj = window.open('https://translate.google.co.jp/?hl=ja&tab=cT&sl=en&tl=ja&op=websites'); obj.addEventListener('load', function () { console.log(arg); obj.document.getElementById('i44').value = url; obj.document.getElementsByClassName('VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ DiOXab zhBWDc Pk9dvb')[0].click(); }, false); } chrome.action.onClicked.addListener((tab) => { const url = tab.url chrome.scripting.executeScript({ target: { tabId: tab.id }, function: ElClick, args: [url] }) })

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

Error

//ソースA Uncaught ReferenceError: $ is not defined //ソースB Uncaught ReferenceError: readStateCheck is not defined //ソースC エラーメッセージはないが、obj.addEventListener();が動かない

補足情報

manifestのバージョンは3で、background.service_workerを使っています。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

itagagaki

2022/05/04 08:11 編集

Uncaught ReferenceError: $ is not defined これは $("#i44", obj.document) のことだと思われます。これはJavaScriptにそぐわないです。何かを参考にしましたか? たぶん obj.document.getElementById('i44') に置き換えれば良さそうな気はしますが。
jupeeze

2022/05/04 09:42

先述の通り、 if ($("#i44", obj.document) != undefined) { を if (obj.document.getElementById('i44') != undefined) { に 置き換えてきましたが、うまくいきません。 Uncaught TypeError: Cannot read properties of undefined (reading 'getElementById') at <anonymous>:5:20 というErrorが新規タブではなく、最初のタブのConsoleで出力されます。 おそらく 新規タブから要素を探すことができていないと考えたのですが、 なにか対処法はありますか?
itagagaki

2022/05/04 09:48

新しく開かれたタブにスクリプトを挿入すれば、そのスクリプトからそのタブのDOMにアクセスすることが可能になると思います。 ちょうど最近似たような質問に回答したので、その回答が参考になるかもしれません。 https://teratail.com/questions/1h91g27u79z4hv
itagagaki

2022/05/04 09:57

あ、chrome.scripting.executeScript() は使ってるんですね。ただそこでスクリプトを挿入しているタブは、新しく開いたウィンドウのタブではないのでダメなんだと思います。そのタブからさらに新しいウィンドウをオープンしちゃっているわけですよね。
jupeeze

2022/05/04 11:46 編集

新しく開くウィンドウのタブにスクリプトを挿入するにはどうすればいいのでしょうか? 以下のようにしているのですが、targetが存在しないというエラーが起きます。 また、 let obj = () => window.open(); を let obj = window.open();にすると、 window is not definedというエラーが起きるのですが、なぜでしょうか? let obj = () => window.open('https://translate.google.co.jp/hl=ja&tab=cT&sl=en&tl=ja&op=websites'); chrome.scripting.executeScript({ target: { tabId: obj.id }, function: ElClick, args: [arg] })
itagagaki

2022/05/04 11:55

やり方はあると思いますが、それより、DOMアクセス部分についてはバックグラウンドスクリプト(サービスワーカー)ではなくコンテンツスクリプトで動かす方が簡単じゃないですかね。 "content_scripts": [ { "all_frames": true, "matches": ["https://translate.google.co.jp/*"], "run_at": "document_end", "js": ["./script.js"] } ], みたいな感じで。
jupeeze

2022/05/04 12:48

コンテンツスクリプトを使ってGoogle翻訳に翻訳したいタブのURLを入力する場合、 最初に開いている翻訳したいタブのURLはどのように取得すればいいのでしょうか?

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能