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

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

ただいまの
回答率

87.49%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 380

score 20

前提・実現したいこと

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

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

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

{
 "background": {"scripts": ["background.js"]},
 "browser_action": {
 "default_icon": "icon-128.png",
 "default_title": "****"
 },
 "name": "Copy",
 "description": "********",
 "homepage_url": "http://****",
 "icons": {
     "16": "icon-16.png",
     "48": "icon-48.png",
     "128": "icon-128.png" },
 "permissions": [
     "tabs",
     "http://*/*",
     "https://*/*"
 ],
 "version": "0.1",
 "manifest_version": 2
}

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

javascript: (() => {
    const video = document.querySelector('video');
    if (video) {
        const canvas = document.createElement('canvas');
        canvas.width =  video.clientWidth;
        canvas.height = video.clientHeight;
        const context = canvas.getContext('2d');
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        const image = new Image();
        image.src = canvas.toDataURL('image/jpeg');
        const a = document.createElement('a');
        a.download = `${location.host}_${new Date().toISOString()}.jpeg`;
        a.target = '_blank';
        a.href = image.src;
        a.click();
    } else {
        alert('There is no video tag.');

    }
})();
void 0;


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

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

});


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • eneko0513

    2021/02/19 22: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 23:37

    eneko0513様

    情報が不足しており大変申し訳ございませんでした。
    また、回答頂いたにも関わらずご連絡遅くなり申し訳ございません。

    既存システム側の情報(ウインドウの挙動など)について、
    本来であれば記述し、ご教授いただきたいのですが、メーカーとの契約上ソースが記載できません。
    ご了承ください。
    こちらで作成した拡張のjsについては少し追記いたしました。
    拙い説明で大変恐縮ですが、よろしくお願いいたします。

    また、情報いただきありがとうございます。
    私自身まだまだ勉強不足ですので少しずつ勉強したいと思います。
    引き続きよろしくお願いいたします。

    キャンセル

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

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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