vue+element を使用した Google プラグインの開発プロセス全体

シンプルな機能: ブラウザの右上隅にあるプラグインアイコンをクリックすると小さなポップアップウィンドウがポップアップし、設定をクリックすると設定ページがポップアップし、背景画像や色を置き換えることができます。

始める

1. ローカルにtestPluginフォルダを作成し、新しいmanifest.jsonファイルを作成します。

{
    "名前": "テストプラグイン",
    "description": "これはテストケースです",
    "バージョン": "0.0.1",
    「マニフェストバージョン」: 2
}

2. プラグインの小さなアイコンを追加する

testPlugin の下に icons フォルダーを作成し、そこにさまざまなサイズのアイコンをいくつか配置します。テストの場合は、面倒でも 1 つのサイズのアイコンだけを配置できます。 manifest.json を次のように変更します。

{
    "名前": "テストプラグイン",
    "description": "これはテストケースです",
    "バージョン": "0.0.1",
    "マニフェストバージョン": 2,
    「アイコン」: {
      "16": "アイコン/16.png",
      "48": "アイコン/16.png"
  }
}

このとき、拡張機能で解凍したプログラム（作成したフォルダ）を読み込むと、プロトタイプが表示されます。

3. プラグインアイコンをクリックして、ブラウザの右上隅にポップアップ表示されるボックスを選択して追加します。

「ブラウザアクション」: {
  "default_title": "テストプラグイン",
  "default_icon": "icons/16.png",
  "default_popup": "index.html"
}

testPlugin は index.html ファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>テストプラグイン</title>
</head>

<本文>
  <input id="name" placeholder="入力してください"/>
</本文>
</html>

プラグインを更新します。このとき、ブラウザに追加したプラグインのアイコンをクリックすると、ポップアップが表示されます。

4.js イベント (スタイルも同様)

document.getElementById('button').onclick = function() {
    アラート(document.getElementById('name').value)
}

HTMLの場合:

<input id="name" placeholder="入力してください"/>
<input id="button" type="button" value="click"/>
<script src="js/index.js"></script>

プラグインを更新します。ブラウザで追加したプラグインのアイコンをクリックすると、入力ボックスに値が表示されます。

ウェブページに埋め込まれたフローティングボックス

上記の例は、アイコンをクリックするとブラウザの右上隅に表示される小さなポップアップウィンドウです。

vue.jsとelement-uiの紹介

vue.jsとelement-uiプラグインの適切なバージョンをダウンロードし、index.jsと同様に導入します。別途jsファイルをダウンロードするアドレスがない場合は、CDNアドレスを開いて圧縮されたコードを直接コピーすることもできます。

manifest.json に追加:

「コンテンツスクリプト」: [
    {
      「一致する」: [
        「<すべてのURL>」
      ]、
      "css": [
        「css/index.css」
      ]、
      "js": [
        "js/vue.js",
        "js/element.js",
        "js/index.js"
      ]、
      "run_at": "ドキュメントアイドル"
    }
  ]、

index.js ファイル内:

ここではプラグインパッケージのサイズを小さくするために、element-ui の CSS を導入するリンクを head 内に挿入する方法を使います。もちろん index.js を導入するのと同じように manifest.json 内に導入することもできます。

Vue インスタンスを index.js ファイルに直接記述しますが、まずインスタンスをマウントするためのノードを作成します。

要素を document.createElement('div') にします。
attr = document.createAttribute('id') とします。
attr.value = 'appPlugin'
要素.setAttributeNode(属性)
document.getElementsByTagName('body')[0].appendChild(要素)

link = document.createElement('link') とします。
linkAttr = document.createAttribute('rel') とします。
linkAttr.value = 'スタイルシート'
linkHref = document.createAttribute('href') とします。
linkHref.value = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
リンク属性を設定する
リンク.setAttributeNode(linkHref)
document.getElementsByTagName('head')[0].appendChild(リンク)


定数vue = 新しいVue({
    el: '#appPlugin',
    テンプレート:`
      <div class="app-plugin-content">{{text}}{{icon_post_message}><el-button @click="Button">ボタン</el-button></div>
    `、
    データ: 関数 () {
        戻り値: { text: 'hhhhhh', icon_post_message: '_icon_post_message', isOcContentPopShow: true }
    },
    マウント() {
        console.log(このテキスト)
    },
    メソッド: {
        ボタン（） {
            this.isOcContentPopShow = false
        }
    }
})

ウェブページの背景色を置き換える簡単なツールを書いてみましょう

インデックス:

要素を document.createElement('div') にします。
attr = document.createAttribute('id') とします。
attr.value = 'appPlugin'
要素.setAttributeNode(属性)
document.getElementsByTagName('body')[0].appendChild(要素)

link = document.createElement('link') とします。
linkAttr = document.createAttribute('rel') とします。
linkAttr.value = 'スタイルシート'
linkHref = document.createAttribute('href') とします。
linkHref.value = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
リンク属性を設定する
リンク.setAttributeNode(linkHref)
document.getElementsByTagName('head')[0].appendChild(リンク)


const vue = 新しい Vue({
    el: '#appPlugin',
    テンプレート: `
        <div v-if="isOcContentPopShow" class="oc-move-page" id="oc_content_page">
            <div class="oc-content-title" id="oc_content_title">色<el-button type="text" icon="el-icon-close" @click="close"></el-button></div>
            <div class="app-plugin-content">背景: <el-color-picker v-model="color1"></el-color-picker></div>
            <div class="app-plugin-content">フォント: <el-color-picker v-model="color2"></el-color-picker></div>
        </div>
    `、
    データ: 関数 () {
        戻り値: color1: null、color2: null、documentArr: []、textArr: []、isOcContentPopShow: true }
    },
    時計：
        色1(値) {
            出力 = document.getElementById('oc_content_page')
            C = document.getElementsByClassName('el-color-picker__panel') とします。
            this.documentArr.forEach(item => {
                    if(!out.contains(item) && !outC[0].contains(item) && !outC[1].contains(item)) {
                        item.style.cssText = `背景色: ${val}!important;色: ${this.color2}!important;`
                    }
            })
        },
        color2(値) {
            出力 = document.getElementById('oc_content_page')
            C = document.getElementsByClassName('el-color-picker__panel')[1] を出力します。
            this.textArr.forEach(item => {
                if(!out.contains(item) && !outC.contains(item)) {
                        item.style.cssText = `color: ${val}!important;`
                    }
            })
        }
    },
    マウント() {
        chrome.runtime.onConnect.addListener((res) => {
            res.name === 'testPlugin'の場合{
                res.onMessage.addListener(mess => {
                    this.isOcContentPopShow = mess.isShow
                })
            }
        })
        this.$nextTick(() => {
            bodys = [...document.getElementsByTagName('body')] とします。
            ヘッダーを [...document.getElementsByTagName('header')] とします。
            divs = [...document.getElementsByTagName('div')] とします。
            lis = [...document.getElementsByTagName('li')] とします。
            articles = [...document.getElementsByTagName('article')] とします。
            asides = [...document.getElementsByTagName('aside')] とします。
            フッターを [...document.getElementsByTagName('footer')] とします。
            navs = [...document.getElementsByTagName('nav')] とします。
            this.documentArr = bodies.concat(ヘッダー、div、lis、記事、asides、footers、navs)

            = [...document.getElementsByTagName('a')] とします
            ps = [...document.getElementsByTagName('p')] とします。
            this.textArr = as.concat(ps)

        })

    },
    メソッド: {
        近い（） {
            this.isOcContentPopShow = false
        }
    }
})

インデックス.html:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>私のプラグイン</title>
  <link rel="スタイルシート" href="css/index.css">
</head>

<本文>
  <div class="plugin">
    <input id="plugin_button" type="button" value="開く" />
  </div>
</本文>
<script src="js/icon.js"></script>

</html>

icon.js を作成します。

plugin_button.onclick = 関数（）{
  混乱（）
}
非同期関数mess(){
  const tabId = getCurrentTabId() を待つ
  const connect = chrome.tabs.connect(tabId, {name: 'testPlugin'});
  connect.postMessage({isShow: true})
}
関数 getCurrentTabId() {
  新しい Promise を返します ((resolve, reject) => {
      chrome.tabs.query({ active: true, currentWindow: true }, 関数(tabs) {
          解決(タブの長さ?タブ[0].id: null)
      });
  })
}

この小さな試みはこれで完了です。もちろん、さらに要件がある場合は、ローカルストレージまたはサーバーと連携できます。

要約する

vue+element を使用した Google プラグインの開発に関するこの記事はこれで終わりです。vue+element プラグイン開発に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:

Moment プラグインを使用して時間をフォーマットする vue のサンプルコード
スワイパープラグインを使用して Vue でカルーセルを実装する例
VueにExcelテーブルプラグインを導入する方法
Vueカスタムディレクティブを使用してドラッグアンドドロッププラグインを構築する方法
Vue コード強調プラグインの総合的な比較と評価
vue-simple-uploader をベースに、ファイルセグメントアップロード、インスタントアップロード、ブレークポイント再開のグローバルアップロードプラグイン機能をカプセル化します。
vue-cli 3 で vue-bootstrap-datetimepicker 日付プラグインを使用する方法
Vue プラグインエラー: このページで Vue.js が検出されました。問題は解決しました

<<: WindowsX Hyper-V ベースの CentOS システムをインストールする

>>: MySQL 8.0 Windows zip パッケージ版の詳細なインストール手順