Chromeプラグイン(UserScript)開発チュートリアル
2022-02-23 12:32:27
開発のメリット
大規模なプラグインに比べ、シンプルなプラグインはシングルファイルであること、ローカルにデプロイできること、簡単に修正できることなどの特徴があります。
以下はその詳細です。
開発環境
各種テキストエディタが利用可能、推奨
Sublime
Visual Studio Code
などのコードエディタ
開発の流れ
1. projname].user.js という名前の js ファイルを作成します。
2. ファイルを開き、その内容を次のように修正します。
// ==UserScript==
// @name [plugin name, both English and Chinese: text]
// @namespace [projname: English]
// @description [a simple description of the plugin's functionality: text]
// @author [author info, text]
// @include [url to function]
// @run-at [run-condition]
// @version [version]
// @grant [authorization1]
// @grant [license2]
// @grant [authorization3]
// @grant [license .....]
// @license MIT/Expat License
// ==/UserScript==
// Write your own code
コード例として
// ==UserScript==
// @name testscript1
// @namespace sunsoft
// @description This test script shows how basic scripting is done
// @author greatbody
// @include https://www.baidu.com/*
// @run-at document-end
// @version 0.1
// @grant unsafeWindow
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @grant GM_listValues
// @license MIT/Expat License
// ==/UserScript==
(function () {
alert('wind');
})();
3. 拡張機能マネージャまたはアプリストアを開く
4. アプリストアに自分のjsファイルをドラッグ&ドロップする
5. ポップアップをクリックし、インストールを確認する
6. 終了、プラグインを使用する準備ができている
参照コード
関連
-
fetch ネットワークリクエストラッパーの説明例
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
Vueにシンプルなメモ帳機能を実装
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
vue ディレクティブ v-html と v-text
-
[解決済み】ローカルファイルを開くことができません - Chrome: ローカルリソースの読み込みが許可されていない
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
jq は html ページとデータを動的に分割する。
-
jquery.ajaxのbeforeSendメソッド(プログレスバー、「お待ちください」プロンプトなどを解決する .............................)。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
vueのグローバルがscss(mixin)を導入。
-
Vueの「データを聴く」原則を解説
-
Vueのフォームイベントのデータバインディングの説明
-
Vueのフィルタの説明
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
スーパー式は null か関数でなければならず、未定義ではない エラーの報告および解決方法