谷歌插件编写

2021-01-13 本文已影响0人吞风咽雪

前言

谷歌插件只要配好了manifest.json就差不多了

开始

manifest.json

{
    "manifest_version": 2,
    "name": "自动登录",
    "version": "1.0",
    "description": "自动登录",
    "author": "爱看书的小猫咪",
    "permissions": [
        "cookies",
        "tabs",
        "http://*/*",
        "https://*/*"
    ],
    "icons": {
        "16": "images/cookie.png",
        "48": "images/cookie.png",
        "128": "images/cookie.png"
    },
    "browser_action": {
        "default_icon": "images/cookie.png",
        "default_popup": "index.html"
    },
    "background": {
        "scripts": [
            "js/background.js"
        ]
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动登录</title>
    <!-- <link rel="stylesheet" href="css/reset.css"> -->
    <link rel="stylesheet" href="lib/element-ui.css">

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            padding: 20px;
            min-width: 400px;
            min-height: 400px;
        }
        .header{
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 class="header">前端自动登录</h1>
        <el-card>
            <div slot="header">设置当前cookie为：</div>
            <el-button type="success" @click="getCookie('baidu.com')">本地环境</el-button>
            <el-button type="primary" @click="getCookie('sina.com')">测试环境</el-button>
        </el-card>
        <el-card>
            <div slot="header">按url地址设置</div>
            <el-form ref="data_form" :model="dataForm" label-width="80px">
                <el-form-item label="URL" prop="url" :rules="[
                { required: true, message: 'URL不能为空'},
                { type: 'string', message: 'URL须为字符串'}
                ]">
                    <el-input type="url" v-model.number="dataForm.url" autocomplete="off">
                        <template slot="append">
                            <el-button size="mini" type="primary" @click="customSet">设置</el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
    <script src="lib/vue.min.js"></script>
    <script src="lib/element-ui.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>

index.js

// Copyright (c) 2021 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

new Vue({
    el: '#app',
    data: function () {
        return {
            dataForm : {
                url: ''
            }
        }
    },
    methods: {
        customSet() {
            this.$refs['data_form'].validate((valid) => {
                if (valid) {
                    this.getCookie(this.dataForm.url)
                }
            })
        },
        getCookie(url) {
            let detail = {}
            if (/^http/.test(url)) {
                detail.url = url
            }else{
                detail.domain = url
            }
            chrome.cookies.getAll(detail, (cookies) => {
                const loginCookies = cookies.filter(item => ['PHPSESSID'].includes(item.name))
                console.log(loginCookies)
                if (loginCookies.length === 2) {
                    this.setLoginCooke(loginCookies)
                } else {
                    this.$message.error('当前选区的网站也没登录！');
                }

            })
        },
        async setCookie(url, name, value) {
            const cookie = await chrome.cookies.set({
                url: url,
                name: name,
                value: value
            },function (cookie) {
                console.log(cookie)
            })
            return cookie
        },
        setLoginCooke(loginCookies) {
            chrome.windows.getCurrent((w) => {
                wid = w.id;
                chrome.tabs.getSelected(wid, (t) => {
                    if (t.url.substr(0, 7) == 'http://' || t.url.substr(0, 8) == 'https://') {
                        Promise.all(
                            loginCookies.map(cookie => this.setCookie(t.url, cookie.name, cookie.value))
                        ).then(res => {
                            console.log(res)
                            this.$message({
                                type: 'success',
                                message: '设置成功',
                                duration: 500
                            })
                        })
                    }else{
                        this.$message.error('当前页面不是http(s)协议');
                    }
                });
            });

        }

    }
})

谷歌插件编写

前言

目录

开始

猜你喜欢

热点阅读