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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

JavaScript

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

Chrome extension

Chrome拡張機能

Q&A

受付中

Google Chromeの拡張機能をポップアップウインドウ内でも利用したい

tomyy
tomyy

総合スコア22

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

JavaScript

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

Chrome extension

Chrome拡張機能

0回答

0グッド

0クリップ

830閲覧

投稿2021/02/17 13:01

編集2021/03/01 14:34

前提・実現したいこと

既存のシステム(ブラウザベース)内でボタンを押すとポップアップウインドウが表示される仕組み(jsのwindow.openのようです)になっており、
そのポップアップウインドウ内から特定要素をローカルファイルに保存する拡張機能を作成しようとしています。

拡張機能は作成でき、テストで取得したい要素のあるページをタブで開き拡張機能を実行すると正常に動作しました。
しかし、ポップアップウインドウ内ではツールバーが表示されないので拡張機能のボタンが押せません。
そこで今度はその拡張機能にショートカットを割り当てしました。
これもタブで開いているときは正常に動作したのですが、ポップアップウインドウ内では動作しません。

manifest.json内の記述で全てのウインドウで動作する様にできるのでしょうか?
どなたかお詳しい方いらっしゃいましたらご教授いただけませんでしょうか?
宜しくお願い致します。

json

1{ 2 "background": {"scripts": ["background.js"]}, 3 "browser_action": { 4 "default_icon": "icon-128.png", 5 "default_title": "****" 6 }, 7 "name": "Copy", 8 "description": "********", 9 "homepage_url": "http://****", 10 "icons": { 11 "16": "icon-16.png", 12 "48": "icon-48.png", 13 "128": "icon-128.png" }, 14 "permissions": [ 15 "tabs", 16 "http://*/*", 17 "https://*/*" 18 ], 19 "version": "0.1", 20 "manifest_version": 2 21}

【追記】
既存システムのイメージは、、、https://www.sejuku.net/blog/48540
こちらのページの「window.open()とは?」の項目にある画像のような表示方法で、
指定のボタンを押すとvideoタグが含まれたここで言う”サンプル.html”が表示されます。
この画像をご覧頂くと分かる通り、ポップアップで開いたウインドウにはアドオンボタンが表示されません。
その為、アドオンにショートカットを割り当てて利用しようと考えました。
しかし通常タブでは動作しますが、ポップアップでは動作しませんでした。。。
実際に動画部分を切り出すスクリプトは以下の様な内容です。
↓main.js

js

1javascript: (() => { 2 const video = document.querySelector('video'); 3 if (video) { 4 const canvas = document.createElement('canvas'); 5 canvas.width = video.clientWidth; 6 canvas.height = video.clientHeight; 7 const context = canvas.getContext('2d'); 8 context.drawImage(video, 0, 0, canvas.width, canvas.height); 9 const image = new Image(); 10 image.src = canvas.toDataURL('image/jpeg'); 11 const a = document.createElement('a'); 12 a.download = `${location.host}_${new Date().toISOString()}.jpeg`; 13 a.target = '_blank'; 14 a.href = image.src; 15 a.click(); 16 } else { 17 alert('There is no video tag.'); 18 19 } 20})(); 21void 0;

こちらはブックマークレットで公開されていたものをjsファイルとして保存し、background.jsで読み出しているものです。
↓background.js

js

1chrome.browserAction.onClicked.addListener(function(tab) { 2 chrome.tabs.executeScript(tab.id, {file: "main.js"}) 3 4});

ファイルは以上となります。

以下のような質問にはグッドを送りましょう

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

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

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

eneko0513

2021/02/19 13:43

可能な限りコードも提示して頂きたいです。 イメージって window.open("test.html","mypopup","width=500,height=300"); みたいな感じで出てきたウィンドウのElementsを取得して次の保存アクションに投げたいってことですよね。 うーん少なくともマニュフェストは関係ないと思います。 あとは下記とかが少し関連あるかも? https://stackoverflow.com/questions/10468136/js-open-popup-window-and-acces-its-element-in-another-page 時間があれば確認してみたいのですが現状だとちょっと情報量が少ないので補完お願いします。
tomyy

2021/03/01 14:37

eneko0513様 情報が不足しており大変申し訳ございませんでした。 また、回答頂いたにも関わらずご連絡遅くなり申し訳ございません。 既存システム側の情報(ウインドウの挙動など)について、 本来であれば記述し、ご教授いただきたいのですが、メーカーとの契約上ソースが記載できません。 ご了承ください。 こちらで作成した拡張のjsについては少し追記いたしました。 拙い説明で大変恐縮ですが、よろしくお願いいたします。 また、情報いただきありがとうございます。 私自身まだまだ勉強不足ですので少しずつ勉強したいと思います。 引き続きよろしくお願いいたします。

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

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

アカウントをお持ちの方は

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

JavaScript

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

Chrome extension

Chrome拡張機能