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

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

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

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

ポップアップ

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

JavaScript

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

Chrome extension

Chrome拡張機能

Q&A

0回答

1072閲覧

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

tomyy

総合スコア22

Chrome

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

ポップアップ

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

JavaScript

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

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2021/02/17 13:01

編集2022/01/12 10:55

前提・実現したいこと

既存のシステム(ブラウザベース)内でボタンを押すとポップアップウインドウが表示される仕組み(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});

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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については少し追記いたしました。 拙い説明で大変恐縮ですが、よろしくお願いいたします。 また、情報いただきありがとうございます。 私自身まだまだ勉強不足ですので少しずつ勉強したいと思います。 引き続きよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問