基于 Vue BootStrap的迷你Chrome插件

立即下载用AI写一个

发布时间：2018-10-31

2人 | 浏览：2196次 | 收藏 |

技术：Vue + Bootstrap + Axios + Bower

运行环境：Visual Studio Code + Chrome + npm

概述

这是一个基于Vue开发的,可查看掘金已发布小册的Chrome插件,在这篇文章中我主要为大家介绍一下如何用Chrome扩展结合Vue和Bootstrap搭建插件项目

详细

- ## 安装

- 安装 Visual Studio Code 和Chrome, 自行翻墙

详细安装这里略过

- 安装包管理工具

用管理员身份运行cmd，输入：

```shell
  npm install -g bower (全局安装)
  ```

- ## 创建

- 新建目录brochure 进入目录运行

```shell
  bower install bootstrap@3 vue axios
  ```

![bower安装](/contentImages/image/20181027/gEPLik4ux5BCbMYvEgE.png "bower安装")

成功！

- 新建 css, js 目录,并在对应的目录下面新建 index.css 和 index.js文件

- 新建 img 目录,导入图标

- 新建 **manifest.json** 写入插件配置

```json
  {
      "manifest_version": 2,
      "name": "发现小册",
      "version": "1.0.0",
      "description": "掘金已发布小册查看插件",
      "icons": {
          "48": "img/48/book.png"
      },
      "browser_action": {
          "default_icon": "img/48/book.png",
          "default_title": "掘金小册查看插件",
          "default_popup": "popup.html" (要与外部的入口的html文件名相同)
      },
      "permissions": [
          "contextMenus",  (在Chrome的右键菜单中增加自己的菜单项)
          "tabs",
          "notifications",
          "webRequest",
          "webRequestBlocking",
          "storage"
      ],
      "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
      "content_scripts": [
          {
              "matches": [
                  "<all_urls>"
              ],
              "js": [
                  "js/index.js"
              ]
          }
      ]
  }
```

注意 : **content_security_policy** 简称CSP, 是Chrome扩展引入为了减少XSS的发生,  这里我们要设置 `"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"` ,
  不然插件引入的vue没法识别，插件会报错。

- 新建 popup.html 的项目入口文件

- 项目基本构建完成

- ## 项目目录

![项目目录](/contentImages/image/20181027/8h98zL9nGU0V1rncOWY.png "项目目录")

- ## 代码

index.css 代码

```css
  body {
      width: 350px;
      height: 400px;
      overflow-y: scroll;
  }
  
  .row {
      border-bottom: .5px solid #e6e8e8;
      padding-bottom: 10px;
      padding-top: 10px;
  
  }
  
  .desc {
      line-height: 20px;
      height: 20px;
      font-size: 12px;
  }
  
  .title {
      font-size: 16px;
      font-weight: 600;
      color: #ed7b11;
      margin-top: 0px;
  }
  
  .info {
      margin-top: 18px;
  }
  
  .author {
      font-weight: blod;
  }
  
  .author-desc,
  .message,
  .buy-number {
      color: #ccc;
  }
  
  .price-text {
      color: #ed7b11;
  }
  
  span {
      padding: 2px;
  }
  ```

popup.html 代码

```html
  <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/index.css">
  <div class="container" id="app"></div>
  <script src="./bower_components/vue/dist/vue.js"></script>
  <script src="./bower_components/axios/dist/axios.js"></script>
  <script src="js/index.js"></script>
  ```

- ## 数据请求与数据绑定

- index.js 添加数据请求
>获取数据的地址为第三方的数据地址，第一页数据：https://xiaoce-timeline-api-ms.juejin.im/v1/getListByLastTime?uid=&client_id=&token=&src=web&alias=&pageNum=1

```js

- 在popup.html的 .container的div下添加数据绑定

```html
    <div class="row" v-for="item in infoList">
        <div class="box">
            <div class="col-xs-4">
                <img v-bind:src="item.img" alt="..." width=100 height=150>
            </div>
            <div class="col-xs-8">
                <h4 class="title"> {{item.title}}</h4>
                <p class="desc">{{item.desc}}</p>
                <br>
                <div class="info">
                    <span class="author">{{item.userData.username}}</span><span class="author-desc">{{item.userData.jobTitle}}</span>
                    <br>
                    <span class="price-text">￥{{item.price}}</span>
                    <span class="message">{{item.lastSectionCount}}小节</span>
                    <span class="buy-number">{{item.buyCount}} 人</span>
                </div>
            </div>
        </div>
    </div>
```

- ## 项目启动

项目完成后，打开chrome 浏览器 找到**更多工具**下面的**扩展程序**,选择**记载已压缩的扩展程序**,

然后选择项目brochure

![扩展安装](/contentImages/image/20181027/9Gsoo1Mz8GjErDyaBxq.png "扩展安装")

出现这个表示安装成功,点击导航行![图标](/contentImages/image/20181027/2aCViwYsG0DQEUCLZl1.png "图标")

- ## 运行效果

![项目](/contentImages/image/20181027/mGgLofd14j2rpG8OYNP.gif "项目")

谢谢！

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

基于 Vue BootStrap的迷你Chrome插件

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子