<rt id="82599ddd"></rt>





      1. 
           
            <center id="606a8396"></center>
           
           
           
           
           
            

        
           
           
           

      2. 狗万官网酒店 > 狗万官网下载 > 利用Vue付出协调之Chrome扩张程序过程详解_vue.js

        利用Vue付出协调之Chrome扩张程序过程详解_vue.js

        来源: 2019-08-04 19:43 我来投稿 参与评论
        这篇文章主要介绍了利用Vue付出协调之Chrome扩张程序过程详解,探测器扩展程序是可以修改和提高 Web 探测器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,团组织标签,转移网页的奇景和表现等等。,要求的爱人可以参考下

        前言

        探测器扩展程序是可以修改和提高 Web 探测器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,团组织标签,转移网页的奇景和表现等等。

        好消息是浏览器扩展并不费工夫写。可以用你已经熟悉的 Web 艺术(HTML、CSS 和 JavaScript)创造 ―― 就像普通网页一样。但是与网页不同之是,扩张程序可以访问许多特定于浏览器的 API,这才是有趣的中央。

        在资产学科中,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简易扩展。本条扩展程序的 JavaScript 有些,我将使用 Vue.js 框架,因为她将允许我们快速启动并运行,而且用 vue 上班是很有意思的。

        资金学科的编码可以在GitHub上找到

        Chrome 扩张程序的基本功知识

        Chrome扩张程序的基本部分是 manifest 文件 和后台脚本。manifest 文件采用JSON分立式,提供有关扩展的第一信息,例如其版本、水资源或所需的权力。前台脚本允许扩展对特定的青铜器事件做出反应,例如创建新选项卡。

        为了演示这些概念,让咱先写一个“Hello,World!” Chrome 扩张。

        创造一个名为 hello-world-chrome 的新文件夹和两个文件:manifest.json 和 background.js:

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

        开辟 manifest.json 并补充以下代码:

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

        name、version 和 manifest_version 都是必填字段。 name 和 version 字段可以是你想要的另外内容; manifest version 应设置为2(副Chrome 18初步)。

        background 同意我们注册一个后台脚本, 在scripts 后面的数组中列入。除非扩展需要用 chrome.webRequest API来阻止或修改网络请求,否则 persistent 键应设置为 false。

        名将以下代码添加到 background.js ,使探测器在设置扩展时弹出出 hello 对话框:

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

        说到底安装扩展程序。开辟 Chrome 并在地址栏中步入 chrome://extensions/。你应该看到一个显示已安装扩展程序的页面。
        鉴于我们要下文件(而不是Chrome地上应用店)安装自己之扩张程序,故而需要采取页面右上角的改组按钮来激活开发者模式。

        这应当添加一个额外的菜单栏,其中包含 Load unpacked选择。单击此按钮并选择你之前创建的 hello-world-chrome 文件夹。单击打开,应当能够看到已安装的扩张,并弹出“Hello,World!”山口。

        恭贺!你刚刚制作了一下 Chrome 扩张程序。

        覆盖 Chrome 的新标签页

        为了在开辟新选项卡时迎接我们的是团结之扩张程序。可以通过使用 Override Pages API 来形成此操作。

        瞩目:在你取得进展之前,请务必停用其他能够覆盖 Chrome 新标签页的扩张程序。一次只同意一个扩展改变这种行为。

        最先创建一个要显示的页面,而不是新的标签页。咱称之为 tab.html。其它应当与清单文件和后台脚本位于同一文件夹中:

        <!DOCTYPE html>
        <html lang="en">
        <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>

        下一场需要让扩展知道页面的生存。可以通过在汇款单文件中指定 chrome_url_overrides 来促成,如下所示:

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

        说到底,你需要重新加载扩展才能使更改生效。你可以通过在 Chrome 的扩张程序页面上单击 Hello World 扩张程序的 reload 图标来实行此操作。

        现今,顶你打开新标签页时,你的自定义消息会出现。

        名将Vue补到扩展

        现今我们有一番奇异基本的扩张,下一场要落实剩下的需功能了。顶用户打开新标签页时,我期望扩展能够:

      3. 副精彩的讥笑网站 icanhazdadjoke.com 获取一个笑话。
      4. 以优良的全封闭式向用户显示该笑话。
      5. 表现用户喜欢该笑话的按钮。这样可以把笑话保存到 chrome.storage。
      6. 表现一下按钮,供客户查看已收藏之讥笑。
      7. 当然你也得以用纯 JavaScript 或像 jQuery 这样的库来形成全部这些 ―― 你开心就好!

        但是由于本学科的目的,我将用 Vue 和令人敬畏的vue-web-extension 旗帜来促成此功能。

        用 Vue 可以让我又快又好地编写更有条理的编码。正如我们所见到的,旗帜文件提供了几个本子,可以在构建 Chrome 扩张程序时解决部分痛苦的广大任务(例如:每当你进行更改时都不能不重新加载扩展程序)。

        vue-web-extension-boilerplate

        资金节假定你的电脑上设置了 Node 和 npm。如果不是这样,你可以到 nodejs.org/en/ 获取相关二进制文件,或者你可以利用版本管理器。我建议使用版本管理器。

        咱还要求安装 Vue CLI 和 @vue/cli-init package:

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

        做到后,让咱得到样板的副本:

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

        这将开辟一个向导,了解你一堆问题。为了保证资产学科的根本,我把回答列出来:

        ? Project name new-tab-page
        ? Project description A Vue.js web extension
        ? Author James Hibbard <jim@example.com>
        ? License MIT
        ? Use Mozilla'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

        你可以根据自己之欣赏调整答案,但是你一贯要安装 axios。咱会用她来获取笑话。

        下一场,改装到花色目录并安装依赖项:

        cd new-tab-page
        npm install

        接下来就足以用规范提供的本子构建我们的新扩展了:

        npm run watch:dev

        这会将扩大构建到花色根目录中的 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

        在品种根目录中得以见到,旗帜文件正在利用 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}

        开辟 tab.html 并补充以下内容:

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

        此地没什么特别之。这是一番简单的 HTML 页面,其它将保存我们的 Vue 老。

        下一场在 tab.js 外方添加:

        import Vue from 'vue';
        import App from './App';
        new Vue({
        el: '#app',
        render: h => h(App)
        });

        在此地导入 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>

        在利用这个新标签页之前,咱需要更新 manifest 文件:

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

        为了使它们可用于扩大,咱还要求让样板编译我们的公文并录制到 dist 文件夹。

        像下面这样修改 webpack.config.js,创新entry和plugins键:

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

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

        获取并显示笑话

        好的,咱已经覆盖了 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>

        名将 <script> 有些更改为如下代码:

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

        说到底,名将 <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>

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

        下一场花点时间来了解一下温馨都做了些什么。

        在模板中,咱采用 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>

        没有什么令人心潮难平之东西了。请注意我们将类似按钮的 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() { ... }
        }

        在此地,咱声明了三个新方法来处理这三个新按钮。

        likeJoke 艺术在 Chrome 的存储中寻找 jokes 属性。如果它不存在(具体说来,我家尚未喜欢一个笑话),会将她初始化为空数组。接下来她将手上的讥笑推送到此数组并将她保存到 storage。说到底,名将 likeButtonDisabled 多少属性设置为 true,并禁用 like 按钮。

        logJokes 艺术还在 Chrome storage 外方寻找 jokes 属性。如果找到了,会遍历其所有条目并将它们输出到控制台。

        clearStorage 艺术负责清除数据。

        后续在扩大中调剂这个新功能,直到自己满意。

        为扩大做一些美化

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

        副一地,安装 vue-awesome 库。其它亦可使我们在页面上采取 Font Awesome 图标,并行使那些按钮看起来更可以一些:

        npm install vue-awesome

        在 src/tab/tab.js 外方对库进行登记:

        import Vue from 'vue';
        import App from './App';
        import "vue-awesome/icons";
        import Icon from "vue-awesome/components/Icon";
        Vue.component("icon", Icon);
        new Vue({
        el: '#app',
        render: h => h(App)
        });

        修改模板:

        <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>

        说到底,让咱为按钮添加更多样式,并补充一张图片:

        <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>

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

        名将扩大程序上传 Chrome Web Store

        如果想让其他人也得以利用你的扩张程序,可以通过Chrome Web Store 形成。

        最先你需要有一番 Google 帐户,可以用该帐户登录 Developer Dashboard 。系统会提醒你输入开发人员详细信息,在公布第一个用到程序之前,你不能不付出 5 泰铢之支出人员注册费(穿越信用卡)。

        下一场,你需要为自己之运用创建一个 ZIP 文件。你可以通过 npm run build-zip 在地方执行这项操作。这会在品种根目录中创造一个名为 dist-zip 的文件夹,其中包含准备上传来 Web Store 的 ZIP 文件。

        对于简单的小扩展,这就够了。但是,在你上传来自己之扩张之前,请务必阅读官方 Publish in the Chrome Web Store 旗帜。

        总结

        在资产学科中,我第一介绍了 Chrome 扩张程序的重要组成部分,并展示了如何用在 Vue.js 外方 vue-web-extension 旗帜构建扩展程序,说到底讲解了如何将扩大上传来 Web Store。

        瞩望你喜欢本学科,并用她唤醒你始构建自己之 Chrome 扩张。

        上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

        义务编辑:狗万官网酒店
         
         
        0% (0)
         
         
        0% (0)
        机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
        地名: 匿名?