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

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

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

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

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

Q&A

解決済

3回答

1321閲覧

ウェブページ上ボタンからChrome拡張機能を起動したい

wkbiz

総合スコア150

Chrome

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

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

0グッド

1クリップ

投稿2019/05/13 17:28

よろしくお願いします。

Chrome/Firefoxにインストールしている拡張機能を、ウェブページ上に配置しているボタン押下をトリガーにして特定の拡張機能を起動させたいです。
半日ほど調べていたのですが見当たらず、ヒントも含めてご教授いただきたく。お願い致します。

特定の拡張機能とは自身で作成したExtension(拡張機能)を指すので、拡張機能そのものは起動すると子画面(ポップアップ)が表示されるもの。という想定です。

そもそも拡張機能はChromeなら chrome.runtime.xxxx と指定して組んでいきます。
なのでウェブページ上のボタン(JavaScript)を押下したことで直接、拡張機能を起動させるのは出来ない。というのが現状私の途中結論です。
1つ目の質問は、この私の認識で合っているのか?についてご意見いただきたく思っています。

2つ目は、
じゃあ例えばラッパー、パイプなど、他のJSモジュールやサーバサイド(nodejs含む)を介して間接的に拡張機能を起動させることはできないか?
ということです。
Go言語使ってできそうな気がしているのですが、私個人Goは使ったことが無く学習コストを考えるとちょっと気が引けてます。
簡単に作れはしないことは分かっていますが、なにかヒントがあればご教授いただけると幸いです。

雑な質問で恐縮です。
ご教授いただけると幸いです。

環境=Windows10 Pro、node.js for windows

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

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

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

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

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

guest

回答3

0

ベストアンサー

拡張機能そのものは起動すると子画面(ポップアップ)が表示されるもの。という想定です。

いわゆるbrowser actionのポップアップは、ユーザーがアイコンをクリックすることでしか表示できないようになっており、プログラム上から表示させることはできないようです。詳しくはこのページの回答にあります。

How can I open my extension's pop-up with JavaScript? - StackOverflow

一方で通常のタブやポップアップウィンドウを作成し拡張機能のHTMLを表示させることは可能です。Content Scriptは直接chrome.tabschrome.windowsにアクセスできないため、backgroud pageを介する必要があります。

  1. Content Scriptを用意し、クリックイベントが発生した時にメッセージを送る
  2. Background Scriptでメッセージを受け取り、ポップアップページを開く

メッセージの渡し方
Message Passing - Google Chrome

コード例

ポップアップウィンドウを表示する例です。

manifest.json

json

1{ 2 "name": "Popup", 3 "description": "popup", 4 "version": "1.0", 5 "permissions": [ 6 "activeTab" 7 ], 8 "background": { 9 "scripts": ["background.js"], 10 "persistent": false 11 }, 12 "content_scripts": [ 13 { 14 "matches": [ 15 "http://*/*", 16 "https://*/*" 17 ], 18 "js": [ 19 "content.js" 20 ] 21 } 22 ], 23 "manifest_version": 2 24} 25

content.js

document.addEventListener("click", e => { // <a> ならポップアップを開く if (e.target.tagName === "A") { chrome.runtime.sendMessage({ action: "OPEN_POPUP" }) } })

background.js

chrome.runtime.onMessage.addListener( function (request, sender, sendResponse) { // popup.html をポップアップウィンドウとして開く if (request.action === "OPEN_POPUP") chrome.windows.create({ 'url': 'popup.html', 'type': 'popup' }) } )

投稿2019/05/13 19:15

karamarimo

総合スコア2551

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

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

wkbiz

2019/05/14 00:30

ありがとうございました。とても助かりました。 公式リファレンスは見ていたつもりだったのですが。見落としです。反省点です。
guest

0

1つ目の質問は、この私の認識で合っているのか?についてご意見いただきたく思っています。

エクステンションの中でも、ページの中にコードを埋め込んで、かつエクステンションのバックエンドと通信できるタイプのものがあったと思います。(たしか)

それを使えば、ページ内のコードとエクステンションのコードを連携できるはずです。

じゃあ例えばラッパー、パイプなど、他のJSモジュールやサーバサイド(nodejs含む)を介して間接的に拡張機能を起動させることはできないか?

いったんサーバを介せば可能かな?(ページのスクリプトと、エクステンションのスクリプトで同じサーバにアクセスして、情報をやり取りする)

セキュリティホールになりうるものなので、用意された機能以外で連携することは難しいと思います。

投稿2019/05/13 17:39

otolab

総合スコア763

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

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

wkbiz

2019/05/14 00:59

ご回答ありがとうございました
guest

0

ご回答ありがとうございます

投稿2019/05/13 17:59

wkbiz

総合スコア150

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問