Comment développer des extensions Chrome avec Vue-Voir.js-php.cn

Comment développer des extensions Chrome avec Vue

Les extensions de navigateur sont de petits programmes qui modifient et améliorent les fonctionnalités de votre navigateur Web. Ils peuvent être utilisés pour diverses tâches telles que le blocage des publicités, la gestion des mots de passe, l'organisation des balises, la modification de l'apparence et du comportement des pages Web, etc.

La bonne nouvelle est que les extensions de navigateur ne sont pas difficiles à écrire. Peut être créé à l'aide de technologies Web que vous connaissez déjà (HTML, CSS et JavaScript), tout comme une page Web ordinaire. Mais contrairement aux pages Web, les extensions ont accès à de nombreuses API spécifiques au navigateur, et c'est là que le plaisir commence.

Dans ce tutoriel, je vais vous montrer comment créer une extension simple pour Chrome qui modifie le comportement de la nouvelle page à onglet. Pour la partie JavaScript de cette extension, je vais utiliser le framework Vue.js car cela nous permettra d'être opérationnels rapidement et c'est amusant de travailler avec vue.

Le code de ce didacticiel est disponible sur GitHub

Bases des extensions Chrome

La partie essentielle d'une extension Chrome est le manifest File et Backend Script. Le fichier manifeste est au format JSON et fournit des informations importantes sur l'extension, telles que sa version, ses ressources ou les autorisations requises. Les scripts en arrière-plan permettent aux extensions de réagir à des événements spécifiques du navigateur, tels que la création de nouveaux onglets.

Pour illustrer ces concepts, écrivons d'abord une extension Chrome « Hello, World ! ».

Créez un nouveau dossier appelé hello-world-chrome et deux fichiers : manifest.json et background.js :

mkdir hello-world-chrome
cd hello-world-chrome
touch manifest.json background.js

Copier après la connexion

Ouvrez manifest.json et ajoutez le code suivant :

{
  "name": "Hello World Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

Copier après la connexion

name, version et manifest_version sont tous des champs obligatoires. Les champs name et version peuvent être ce que vous voulez ; la version du manifeste doit être définie sur 2 (à partir de Chrome 18).

background nous permet d'enregistrer un script d'arrière-plan, répertorié dans le tableau après scripts. La clé doit être définie sur , sauf si l'extension doit bloquer ou modifier les requêtes réseau à l'aide de l'persistentAPI chrome.webRequestfalse.

Ajoutez le code suivant à background.js pour que le navigateur affiche une boîte de dialogue bonjour lorsque l'extension est installée :

chrome.runtime.onInstalled.addListener(() => {
  alert(&#39;Hello, World!&#39;);
});

Copier après la connexion

Enfin, installez l'extension. Ouvrez Chrome et tapez chrome://extensions/ dans la barre d'adresse. Vous devriez voir une page montrant l’extension installée.

Puisque nous installons notre extension à partir d'un fichier (plutôt que du Chrome Web Store), nous devons activer le Mode développeur à l'aide du bouton bascule dans le coin supérieur droit de la page. Cela devrait ajouter une barre de menu supplémentaire avec l'option Load unpacked. Cliquez sur ce bouton et sélectionnez le dossier hello-world-chrome que vous avez créé précédemment. Cliquez sur pour ouvrir , vous devriez pouvoir voir l'extension installée et la fenêtre "Hello, World!" apparaîtra.

Comment développer des extensions Chrome avec Vue

Félicitations ! Vous venez de créer une extension Chrome.

Superposer la page du nouvel onglet de Chrome

De sorte que lorsque nous ouvrons un nouvel onglet, nous soyons accueillis par sa propre extension. Cela peut être fait à l'aide de l'API Override Pages.

Remarque : avant de progresser, assurez-vous de désactiver les autres extensions qui remplacent la page du nouvel onglet de Chrome. Une seule extension à la fois est autorisée à modifier ce comportement.

Créez d'abord une page à afficher au lieu d'un nouvel onglet. Nous l'appelons tab.html. Il doit se trouver dans le même dossier que le fichier manifeste et le script d'arrière-plan :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My New Tab Page!</title>
</head>
<body>
  <h1>My New Tab Page!</h1>
  <p>You can put any content here you like</p>
</body>
</html>

Copier après la connexion

Ensuite, vous devez informer l'extension de l'existence de la page. Ceci peut être réalisé en spécifiant chrome_url_overrides dans le fichier manifeste, comme ceci :

"chrome_url_overrides": {
  "newtab": "tab.html"
}

Copier après la connexion

Enfin, vous devez recharger l'extension pour que les modifications prennent effet. Vous pouvez le faire en cliquant sur l'icône recharger de l'extension Hello World sur la page des extensions de Chrome.

Comment développer des extensions Chrome avec Vue

现在，当你打开新标签页时，你的自定义消息会出现。

将Vue添加到扩展

现在我们有一个非常基本的扩展，接下来要实现剩下的需功能了。当用户打开新标签页时，我希望扩展能够：

从精彩的笑话网站 icanhazdadjoke.com 获取一个笑话。
以良好的格式向用户显示该笑话。
显示用户喜欢该笑话的按钮。这样可以把笑话保存到 chrome.storage。
显示一个按钮，供用户查看已收藏的笑话。

当然你也可以用纯 JavaScript 或像 jQuery 这样的库来完成所有这些 —— 你开心就好！

但是出于本教程的目的，我将用 Vue 和令人敬畏的 vue-web-extension 样板来实现此功能。

用 Vue 可以让我又快又好地编写更有条理的代码。正如我们所看到的，样板文件提供了几个脚本，可以在构建 Chrome 扩展程序时解决一些痛苦的常见任务（例如：每当你进行更改时都必须重新加载扩展程序）。

vue-web-extension-boilerplate

本节假定你的计算机上安装了 Node 和 npm。如果不是这样，你可以到 https://nodejs.org/en/ 获取相关二进制文件，或者你可以使用版本管理器。我建议使用版本管理器。

我们还需要安装 Vue CLI 和 @vue/cli-init package：

npm install -g @vue/cli
npm install -g @vue/cli-init

Copier après la connexion

完成后，让我们得到样板的副本：

vue init kocal/vue-web-extension new-tab-page

Copier après la connexion

这将打开一个向导，询问你一堆问题。为了保证本教程的重点，我把回答列出来：

? Project name new-tab-page
? Project description A Vue.js web extension
? Author James Hibbard <jim@example.com>
? License MIT
? Use Mozilla&#39;s web-extension polyfill? No
? Provide an options page? No
? Install vue-router? No
? Install vuex? No
? Install axios? Yes
? Install ESLint? No
? Install Prettier? No
? Automatically install dependencies? npm

Copier après la connexion

你可以根据自己的喜好调整答案，但是你一定要安装 axios。我们会用它来获取笑话。

接下来，切换到项目目录并安装依赖项：

cd new-tab-page
npm install

Copier après la connexion

然后就可以用样板提供的脚本构建我们的新扩展了：

npm run watch:dev

Copier après la connexion

这会将扩展构建到项目根目录中的 dist 文件夹中，来进行开发并监视更改。

要将扩展程序添加到 Chrome，请执行上述相同的步骤，要选择 dist 文件夹作为扩展程序目录。如果一切按计划进行，那么当扩展程序初始化时，你应该看到“Hello world！”消息。

项目设置

让我们花一点时间来看看样板给了我们些什么。当前文件夹结构应如下所示：

.
├── dist
│   └── <the built extension>
├── node_modules
│   └── <one or two files and folders>
├── package.json
├── package-lock.json
├── scripts
│   ├── build-zip.js
│   └── remove-evals.js
├── src
│   ├── background.js
│   ├── icons
│   │   ├── icon_128.png
│   │   ├── icon_48.png
│   │   └── icon.xcf
│   ├── manifest.json
│   └── popup
│       ├── App.vue
│       ├── popup.html
│       └── popup.js
└── webpack.config.js

Copier après la connexion

在项目根目录中可以看到，样板文件正在使用 webpack。这很好，因为这为我们的后台脚本提供了 Hot Module Reloading。

src文件夹包含我们将用于扩展的所有文件。manifest 文件和 background.js 对于我们来说是熟悉的，但也要注意包含Vue 组件的 popup 文件夹。当样板文件将扩展构建到 dist 文件夹中时，它将通过 vue-loader 管理所有 .vue 文件并输出一个浏览器可以理解的 JavaScript 包。

在 src 文件夹中还有一个 icons 文件夹。如果你看一眼 Chrome 的工具栏，会看到我们的扩展程序的新图标（也被称为 browser action）。这就是从此文件夹中拿到的。如果单击它，你应该会看到一个弹出窗口，显示“Hello world！” 这是由 popup/App.vue 创建的。

最后，请注 scripts 文件夹的两个脚本：一个用于删除 eval 用法以符合 Chrome Web Store 的内容安全策略，另一个用于当你要把扩展上传到Chrome Web Store时将其打包到 .zip 文件中，。

在 package.json 文件中还声明了各种脚本。我们将用 npm run watch:dev 来开发扩展，然后使用 npm run build-zip 生成一个ZIP文件以上传到 Chrome Web Store。

在新标签页中使用 Vue 组件

首先从 background.js 中删除烦人的 alert 语句。

在 src 文件夹中创建一个新的 tab 文件夹来存放新标签页的代码。我们将在这个新文件夹中添加三个文件 —— App.vue，tab.html， tab.js：

mkdir src/tab
touch src/tab/{App.vue,tab.html,tab.js}

Copier après la connexion

打开 tab.html 并添加以下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>New Tab Page</title>
  <link rel="stylesheet" href="tab.css">
</head>
<body>
  <div id="app"></div>
  <script src="tab.js"></script>
</body>
</html>

Copier après la connexion

这里没什么特别的。这是一个简单的 HTML 页面，它将保存我们的 Vue 实例。

接下来在 tab.js 中添加：

import Vue from &#39;vue&#39;;
import App from &#39;./App&#39;;

new Vue({
  el: &#39;#app&#39;,
  render: h => h(App)
});

Copier après la connexion

在这里导入 Vue，用它为元素传递一个选择器，然后告诉它渲染 App 组件。

最后在 App.vue 中写如下代码：

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data () {
    return {
      message: "My new tab page"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 20px;
}
</style>

Copier après la connexion

在使用这个新标签页之前，我们需要更新 manifest 文件：

{
  "name":"new-tab-page",
  ...
  "chrome_url_overrides": {
    "newtab": "tab/tab.html"
  }
}

Copier après la connexion

为了使它们可用于扩展，我们还需要让样板编译我们的文件并复制到 dist 文件夹。

像下面这样修改 webpack.config.js，更新entry和plugins键：

entry: {
  &#39;background&#39;: &#39;./background.js&#39;,
  &#39;popup/popup&#39;: &#39;./popup/popup.js&#39;,
  &#39;tab/tab&#39;: &#39;./tab/tab.js&#39;
}
plugins: [
  ...
  new CopyWebpackPlugin([
    { from: &#39;icons&#39;, to: &#39;icons&#39;, ignore: [&#39;icon.xcf&#39;] },
    { from: &#39;popup/popup.html&#39;, to: &#39;popup/popup.html&#39;, transform: transformHtml },
    { from: &#39;tab/tab.html&#39;, to: &#39;tab/tab.html&#39;, transform: transformHtml },
    ...
  })

Copier après la connexion

你需要重新启动 npm run watch:dev 任务才能使这些更改生效。完成此操作后，重新加载扩展程序并打开新选项卡。你应该会看到“My new tab page”。

Comment développer des extensions Chrome avec Vue

获取并显示笑话

好的，我们已经覆盖了 Chrome 的新标签页，并且将其替换为了 mini Vue app。但是我们要做的不仅仅是显示一条消息。

更改 src/tab/App.vue 中的模板部分如下：

<template>
  <div>
    <div v-if="loading">
      <p>Loading...</p>
    </div>
    <div v-else>
      <p class="joke">{{ joke }}</p>
    </div>
  </div>
</template>

Copier après la connexion

将 <script> 部分更改为如下代码：

<script>
import axios from &#39;axios&#39;;

export default {
  data () {
    return {
      loading: true,
      joke: "",
    }
  },
  mounted() {
    axios.get(
      "https://icanhazdadjoke.com/",
      { &#39;headers&#39;: { &#39;Accept&#39;: &#39;application/json&#39; } }
    )
      .then(res => {
        this.joke = res.data.joke
        this.loading = false;
      });
  }
}
</script>

Copier après la connexion

最后，将 <style> 部分更改为如下代码：

<style>
body {
  height: 98vh;
  text-align: center;
  color: #353638;
  font-size: 22px;
  line-height: 30px;
  font-family: Merriweather,Georgia,serif;
  background-size: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.joke {
  max-width: 800px;
}
</style>

Copier après la connexion

如果你正在运行 npm run watch:dev 任务，则扩展程序会自动重新加载，并且每当你打开新标签页时都会看到一个笑话。

Comment développer des extensions Chrome avec Vue

接下来花点时间来了解一下自己都做了些什么。

在模板中，我们使用 v-if 块来显示加载消息或笑话，具体取决于 loading 的状态。最初它被设置为 true（显示加载消息），然后我们的脚本将触发 Ajax 请求来检索笑话。一旦 Ajax 请求完成，loading 属性将被设置为 false，导致组件被重新渲染并显示笑话。

在 <script> 部分，我们导入了 axios，然后声明了几个数据属性——前面提到的 loading 属性和一个 joke 属性来保存这个笑话。然后使用了 mount 生命周期钩子，一旦我们的 Vue 实例被挂载就会触发，向 joke API 发出 Ajax 请求。请求完成后，更新两个数据属性使组件重新渲染。

到目前为止还挺好。

将笑话持持久化到 Chrome Storage

接下来，添加一些能够让用户喜欢一个笑话和列出喜欢的笑话列表的按钮。由于我们将使用 Chrome’s storage API 来保存这些笑话，所以可能需要添加第三个按钮来删除 storage 中的笑话。

将按钮添加到 v-else 块：

<div v-else>
  <p class="joke">{{ joke }}</p>

  <button @click="likeJoke" :disabled="likeButtonDisabled">Like Joke</button>
  <button @click="logJokes" class="btn">Log Jokes</button>
  <button @click="clearStorage" class="btn">Clear Storage</button>
</div>

Copier après la connexion

没有什么令人兴奋的东西了。请注意我们将类似按钮的 disabled 属性绑定到 Vue 实例上的数据属性来确定其状态。这是因为用户不应该多次喜欢一个笑话。

接下来，将 click handler 和 Like Button Disabled 添加到脚本部分：

export default {
  data () {
    return {
      loading: true,
      joke: "",
      likeButtonDisabled: false
    }
  },
  methods: {
    likeJoke(){
      chrome.storage.local.get("jokes", (res) => {
        if(!res.jokes) res.jokes = [];
        res.jokes.push(this.joke)
        chrome.storage.local.set(res);
        this.likeButtonDisabled = true;
      });
    },
    logJokes(){
      chrome.storage.local.get("jokes", (res) => {
        if(res.jokes) res.jokes.map(joke => console.log(joke))
      });
    },
    clearStorage(){
      chrome.storage.local.clear();
    }
  },
  mounted() { ... }
}

Copier après la connexion

在这里，我们声明了三个新方法来处理这三个新按钮。

likeJoke 方法在 Chrome 的存储中查找 jokes 属性。如果它不存在（也就是说，用户尚未喜欢一个笑话），会将其初始化为空数组。然后它将当前的笑话推送到此数组并将其保存到 storage。最后，将 likeButtonDisabled 数据属性设置为 true，并禁用 like 按钮。

logJokes 方法还在 Chrome storage 中查找 jokes 属性。如果找到了，会遍历其所有条目并将它们输出到控制台。

clearStorage 方法负责清除数据。

继续在扩展中调整这个新功能，直到自己满意。

Comment développer des extensions Chrome avec Vue

为扩展做一些美化

它能够工作了，但是按钮是很丑，页面也有点简单。下面就要给扩展做一些润色。

下一步，安装 vue-awesome 库。它能够使我们在页面上使用 Font Awesome 图标，并使这些按钮看起来更漂亮一些：

npm install vue-awesome

Copier après la connexion

在 src/tab/tab.js 中对库进行注册：

import Vue from &#39;vue&#39;;
import App from &#39;./App&#39;;
import "vue-awesome/icons";
import Icon from "vue-awesome/components/Icon";

Vue.component("icon", Icon);

new Vue({
  el: &#39;#app&#39;,
  render: h => h(App)
});

Copier après la connexion

修改模板：

<template>
  <div>
    <div v-if="loading" class="centered">
      <p>Loading...</p>
    </div>
    <div v-else>
      <p class="joke">{{ joke }}</p>

      <div class="button-container">
        <button @click="likeJoke" :disabled="likeButtonDisabled" class="btn">
        <icon name="thumbs-up"></icon>
        </button>
        <button @click="logJokes" class="btn"><icon name="list"></icon></button>
        <button @click="clearStorage" class="btn"><icon name="trash"></icon></button>
      </div>
    </div>
  </div>
</template>

Copier après la connexion

最后，让我们为按钮添加更多样式，并添加一张图片：

<style>
body {
  height: 98vh;
  text-align: center;
  color: #353638;
  font-size: 22px;
  line-height: 30px;
  font-family: Merriweather,Georgia,serif;
  background:url("https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/12/1544189726troll-dad
  .png") no-repeat 1% 99%;
  background-size: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.joke {
  max-width: 800px;
}

.button-container {
  position: absolute;
  right: 0px;
  top: calc(50% - 74px);
}

.btn {
  background-color: #D8D8D8;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  display: block;
  margin-bottom: 5px;
  width: 50px;
}

.btn:hover {
  background-color: #C8C8C8;
}

.btn:disabled {
  background-color: #909090;
}
</style>

Copier après la connexion

重新加载扩展并打开一个新标签，你应该看到这样的东西。

Comment développer des extensions Chrome avec Vue