chrome 插件开发

[AnnVoV]

背景

为了在测试环境能方便的写入登录账号的cookie, 我决定写一个插件，来简化自己的操作。插件的开发和我们平时写页面并无差异，只是多了一份manifest.json文件。

关于manifest.json 插件清单的写法不在这里阐述了，给一个我的清单配置，具体的含义可以查询官网和搜索网上资料。

// manifest.json
{
  "manifest_version": 2,
  "name": "autoLogin",
  "version": "1.0",
  "description": "自动写入cookie",
  "icons": {
    "19": "icon.png"
  },

  "browser_action": {
    "default_title": "自动写入cookie",
    "default_popup": "login.html"
  },

  "permissions": [
    "cookies",
    "webNavigation",
    "activeTab",
    "<all_urls>",
    "http://*/",
    "https://*/"
  ]
}

// 插件脚本
const findById = (id) => document.getElementById(id);

const getCurrentTabUrl = () => {
    const queryInfo = {
        active: true,
        currentWindow: true,
    };
    return new Promise((resolve) => {
        chrome.tabs.query(queryInfo, (tabs) => {
            const tab = tabs[0];
            const url = tab.url;
            resolve({
                url,
                tab,
            });
        });
    });
};

const getLoginName = () => {
    return new Promise((resolve, reject) => {
        const name = findById('devInput').value;
        resolve(name);
    });
};

const setCookie = (tabData, cookieName, value) => {
    const setChromeCookie = (cookie) => {
        chrome.cookies.set(cookie, () => {
            alert('写入cookie成功!');
            refreshPage(tabData)
        });
    };
    if (tabData.url.indexOf('kaola.com') === -1) {
        // 给自己本地服务写的
        setChromeCookie({
            value,
            url: tabData.url,
            name: cookieName,
        });
    }
    setChromeCookie({
        value,
        name: cookieName,
        url: 'http://m-user.kaola.com',
        domain: '.kaola.com',
    });
};

const refreshPage = (tab) => {
    const code = 'window.location.reload();';
    chrome.tabs.executeScript(tab.id, {code: code});
};

export default async function() {
    const configObj = await getCurrentTabUrl();
    const value = await getLoginName();
    const cookieName = '__fakeAccountId';
    setCookie(configObj, cookieName, encodeURIComponent(value));
}

遇到的一些问题

1.一开始用Promise.all 去处理了最后一段，但是怎么都觉得不舒服，后来又使用了async await, 不禁又再次想起了“ async await 解决了我们什么样的痛点？”这个问题 2.深入 cookie， 这个后面会再写一篇笔记 3.这段脚本是给测试环境用的，后来想在正式环境也做个自动登录插件，做的过程中遇到了页面上有iframe， 要获取iframe中的节点如何获取的问题？以及iframe 跨域通信的问题，这个后面也要整理出来