1. ホーム
  2. JavaScript

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. 終了、プラグインを使用する準備ができている

参照コード


  1. GitHub 中国語プラグイン
  2. UserScript開発ドキュメント
  3. ユーザースクリプト共有サイト(ウォールが必要)
  4. openuserjs共有サイト(壁を登る必要があります。)
  5. greasyfork ユーザースクリプト共有