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

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

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

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

Chrome extension

Chrome拡張機能

Q&A

解決済

2回答

6991閲覧

Chrome拡張機能にてpage_actionモードの時にpopup.htmlが表示されない

kbn1053

総合スコア17

Chrome

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

Chrome extension

Chrome拡張機能

0グッド

1クリップ

投稿2018/01/17 19:38

###前提・実現したいこと
こんにちは。

Chromeの拡張機能を初めて作っております。
拡張機能のpopup表示方法について教えてください。

manifest.jsonにてpage_actionを選択した場合にて、
Chrome右上の拡張機能アイコンをクリックした際のpopupが自作のpopup.htmlで表示されません。
(chromeのデフォルトのpopupが表示された)

manifest.jsonで、browser_actionに変えた場合、自作のpopup.htmlが正常に表示されました。

page_actionでpopup.htmlが表示できないのは仕様的なものでしょうか?
または、manifest.jsonの書き方が悪いのでしょうか?
ご存知の方、ご教示頂けたら幸いです。

###発生している問題・エラーメッセージ
拡張機能のモードがpage_actionだと自分で作成したpopup.htmlを読み込みに行かず、デフォルトのpopupが表示された。
イメージ説明

browser_actionに変えたところ、自分で作成したpopup.htmlが表示された。
イメージ説明

###該当のソースコード
page_action版のmanifest.jsonです。

json

1{ 2 "name": "TaskOverImgforTrello", 3 "version": "0.1.0", 4 "manifest_version": 2, 5 "description": "省略", 6 "icons": { 7 "16": "icons/icon16.png", 8 "48": "icons/icon48.png", 9 "128": "icons/icon128.png" 10 }, 11 "page_action": { 12 "default_icon": { 13 "19": "icons/icon19.png" 14 }, 15 "default_title": "TaskOverImgforTrello", 16 "default_popup": "popup.html" 17 }, 18 "content_scripts": [ 19 { 20 "matches": [ 21 "https://trello.com/*" 22 ], 23 "css": [ 24 "css/style.css" 25 ], 26 "js": [ 27 "js/script.js" 28 ] 29 } 30 ], 31 "options_page": "options.html", 32 "permissions": [ 33 "storage", 34 "tabs" 35 ], 36 "web_accessible_resources": [ 37 "images/ocean_bed.png" 38 ], 39 "content_security_policy": "script-src 'self' 'unsafe-eval' https://ajax.googleapis.com/ ; object-src 'self'" 40}

###試したこと
検索しましたが、自分と同じ悩みの方は特にいませんでした。

Chrome拡張の記事でpage_actionでdefault_popupで設定しているソースを記載している方もおり、
自分のmanifest.jsonの記述方法が良くないのかな?と思っております。

または、
公式の記事では、page_actionのpopupについての表記が、
browser_actionと違いほとんど書かれていなかったので、最近の仕様的に出来なくされているのでは?とも思っております。

###補足情報(言語/FW/ツール等のバージョンなど)
Chrome バージョン: 63.0.3239.132(Official Build) (64 ビット)

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

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

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

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

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

guest

回答2

0

ベストアンサー

Page Actionの場合、アイコンが不活性の状態ではPopupは表示されません。例えば、

JavaScript

1new Promise(resolve => { 2 // インストール時とアップデート時に実行 3 chrome.runtime.onInstalled.addListener(resolve) 4}).then(() => { 5 return new Promise(resolve => { 6 // 元のルールを削除した上で、 7 chrome.declarativeContent.onPageChanged.removeRules(undefined, resolve) 8 }) 9}).then(() => { 10 // 再度新しいルールを設定する 11 chrome.declarativeContent.onPageChanged.addRules([{ 12 conditions: [ 13 new chrome.declarativeContent.PageStateMatcher({ 14 pageUrl: { 15 hostEquals: 'twitter.com', // 対象のURLを指定 16 schemes: ['https'] 17 } 18 }) 19 ], 20 actions: [new chrome.declarativeContent.ShowPageAction()] 21 }]) 22})

このような処理を(Background Scriptsに)入れていないでしょうか?条件にマッチするときだけアイコンを活性化させるというもので、Page Actionを使う場合の定型句の1つではないかと思います。

Content Scriptsについてはmanifest.jsonで対象のURLを指定しますが、Page Actionの場合はこんな感じで自前(?)で設定するという方法です。

なお、この方法を使う場合は、permissionsdeclarativeContentを追加する必要があります。

投稿2018/01/18 01:29

sii_side

総合スコア849

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

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

kbn1053

2018/01/18 02:34

丁寧な回答ありがとうございます。 確かに今考えるとアイコンが対象ページでも不活性で変だな~と思っておりました。 自前の活性化処理が必要なんですね。参考ソースを元にやってみます!ありがとうございました。
guest

0

公式:pageActionのリンク先に以下の記述があります。

You make a page action appear and be grayed out using the pageAction.show and pageAction.hide methods, respectively. By default, a page action appears grayed out.

ぐーぐる翻訳
あなたは、ページアクションが表示され、使用してグレーアウトさせる pageAction.showと pageAction.hideそれぞれのメソッドを。デフォルトでは、ページアクションはグレー表示されます

background.jsに以下の行を追加後拡張機能をリロードしてくださいな。

JavaScript

1chrome.tabs.onUpdated.addListener((tabId) => { 2 chrome.pageAction.show(tabId); 3});

投稿2018/01/18 00:05

編集2018/01/18 00:08
umyu

総合スコア5846

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

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

kbn1053

2018/01/18 02:38

回答ありがとうございます!分かり易いコードで助かります。 作っているのが簡単な拡張機能なので、background.jsとかいらないや、と思ってましたがメチャメチャ必要でした…。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問