目次一覧
状態:-
閲覧数:485
投稿日:2019-07-20
更新日:2019-07-20
ダウンロード ／ 動作確認 ／ 実装する
実装内容反映の動作確認 ／ 失敗に終わる
実装内容反映の動作確認 ／ 失敗に終わる
ダウンロード ／ 動作確認 ／ 実装する
ダウンロード
Chrome拡張を簡単に作れるテンプレとライブラリ造ったので紹介
動作確認
manifest.json を更新
"matches" の URL をこの拡張を有効にしたい URL に置き換える
"matches": ["https://twitter.com/*"],
Chrome で動かしてみる
Chrome 拡張を Chrome に取り込む
対象URL(https://twitter.com/)へアクセス
成功なら Title の頭に ◆ と ■ が交互に表示されて回ってるようになる
F12 で「デベロッパーツール」を開く
Console に下記文言が出力されていることを確認
Chrome拡張の疎通確認コードが動いています。動作確認ができたら削除してください。
実装する
content_script.js に実装
デフォルト
//----------------------
$(function () {
//↓疎通確認コード：タイトルの■が回転するはず
console.log('Chrome拡張の疎通確認コードが動いています。動作確認ができたら削除してください。');
let flag = false;
setInterval(function () {
document.title = (flag ? "■" : "◆") + document.title.replace(/^[■◆]/, '');
flag = !flag;
}, 1000);
//↑疎通確認コード
});
data属性に特定の値を持つノードを選択
HTM
<div data-hoge="a">あ</div>
jQuery
$(function(){
var elem = $('[data-hoge="a"]');
console.log(elem.text());
})console
あ
ChEx.jsを外す
干渉することがあるため、manifest.jsonより削除
"js": ["jquery-2.2.0.min.js", "content_script.js"]
実装内容反映の動作確認 ／ 失敗に終わる
実装内容反映の動作確認
2手順
・拡張機能「chrome://extensions/」の更新アイコンをクリック
・対象URL(https://twitter.com/)上で右クリック。キャッシュ削除
失敗に終わる
TwitterレスポンシブUIの拡張機能を作成したが、キャッシュに苦しむ
・挙動不審
・意図した通り動作する場合もあるが、そうではない場合もある
・結局、機能停止した
https://waterada.github.io/chrome-ex-template/test/example.html?presentation=1
「HTML5独自データ属性が指定の値である要素」を削除したい
新しいTwitterのデザインに馴染めないユーザーにお勧めの拡張機能「GoodTwitter」
Twitter検索結果。「Chrome拡張を作る」に関する最新ツイート
リュウジ@Web集客の専門家 @ryuji_writer
やまだ@Webアプリ開発に取り憑かれた人 @yamd_appやまだ@Webアプリ開発に取り憑かれた人 @yamd_appやまだ@Webアプリ開発に取り憑かれた人 @yamd_app「1回15分でChrome拡張機能を作るシリーズ」、第2弾を公開しました。
https://t.co/s28qqnmkbw 2021/08/02 12:46
ゆうた❎React,ReactNative勉強中 @yutabeginner
あやちの助 @AyachiGinChromeとFirefox両方で動く拡張機能を作る今どきの方法is何
TypeScript使いたいが 2021/07/31 21:21
テレスコ @Telesco910興味本位でChromeの拡張アドインを作り始めたはいいものの、作るファイルが多くて整理大変🤯 2021/07/29 19:12