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

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

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

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

Chrome extension

Chrome拡張機能

Q&A

解決済

3回答

7299閲覧

自前のChrome拡張機能が動かない

CyberRex

総合スコア153

Chrome

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

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2017/08/05 05:32

###自作したChrome拡張機能が動かない
Chrome拡張機能を、他のサイトを参考にしながら作ってみたのですが、動きません。
拡張機能は、パッケージ化させておらず、拡張機能管理のデベロッパーモードでインストールしました。
###問題のコード(manifest.json)

lang

1{ 2 "manifest_version": 2, 3 "name": "テスト拡張機能", 4 "description": "拡張機能テスト", 5 "version": "1.0", 6 "browser_action": { 7 "default_icon": "icon.png", 8 "default_popup": "index.html", 9 "default_title": "テスト拡張機能" 10 }, 11 "content_scripts": [ 12 { 13 "matches": ["http://*/*","https://*/*"], 14 "js": ["appContent.js","jquery.js"] 15 } 16 ], 17 "permissions": ["notifications"] 18}

###問題のコード(appContent.js)

lang

1$(function() { 2 $("body").html( 3 $("body").html().replace( /。/g, "!" ) 4); 5});

###上記コードの説明
これのコードが問題なのですが、appContent.jsは、全てのサイトで動くようにマニフェストで指定してあります。
コードは、ページ内の「。」を「!」に変えるものです。
しかし、動きません。エラーにはなっていないので正しいはずなのですが・・・。
jQueryもフォルダに入れてあります。
パッケージ化していないのが原因なのでしょうか?

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

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

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

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

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

guest

回答3

0

自己解決

###すみません、自己解決しました!
申し訳ございません。自分のミスで誤動作を招きました。
###見落としやすい部分があった!

lang

1"content_scripts": [ 2 { 3 "matches": ["http://*/*"], 4 "js": ["appContent.js","jquery.js"] 5 } 6]

この、jsの部分、実は、列挙した通りに読み込むのです!
なので

lang

1"js": ["jquery.js","appContent.js"]

とすることで解決しました!

投稿2017/08/05 08:30

CyberRex

総合スコア153

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

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

0

イメージ説明
デベロッパーツールは、この部分でスクリプトのスコープ分けみたいなものがされてます。
この図のMovieMinerが私の自作のchrome拡張スクリプトです。
こういうふうに、自分のスクリプトを選んだ状態じゃないとログ出力が見えなかったかもしれません。
あと、私のスクリプトではmatches<all_urls>にしています。

json

1"matches": [ "<all_urls>" ]

投稿2017/08/05 08:25

zohnam

総合スコア1441

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

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

0

content_scriptsmatchesは「どこでその拡張スクリプトを動作させるか」という指定です。
セキュリティ的な意味で「どこでもアクセスして干渉できちゃうよ」という意味の指示はpermissions<all_urls>を追加してください。

json

1 "permissions": [ 2 "<all_urls>", 3 "notifications" 4 ]

こうなります。

投稿2017/08/05 06:05

zohnam

総合スコア1441

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

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

CyberRex

2017/08/05 07:46 編集

回答ありがとうございます。パーミッションに追加してみたのですが、変わりませんでした。 パーミッション指定漏れが原因ではないようなのですが・・・。 各サイトによれば、Javascriptの他の変数へは、スコープの関係でアクセスできないけど、DOM操作はできると書いてあったので、DOM操作は可能かと・・・。
CyberRex

2017/08/05 07:49

試しにconsole.logで拡張機能からログを出せるか試したら、できませんでした。 思うにスクリプト自体が動いていないように見えます。 matchesプロパティがおかしいのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問