Development environment to automatically obtain cookies chrome plugin. Enter the source and destination sites, as well as the cookieName, and you automatically get and listen for cookie changes and updates in real time.

A chrome plug-in used to automatically obtain cookies in the development environment. By entering the source site, target site and cookie name, you can automatically obtain and monitor the changes of cookies and update them in real time.

Source code repository: github.com/aMiing/chro…

Method of use

  1. Clone this warehouse
git clone https://github.com/aMiing/chrome-extension-cookie.git

cd chrome-extension-cookie
npm install
npm run build

Copy the code
  1. packaging
  2. Open chrome extension Settings
  3. Open development mode in the upper right corner
  4. To load the decompressed extension, selectdistFolder (if it is a CRX compressed file, drag the file directly into the Settings screen)
  5. Click on the extension icon in the upper right corner of your browser and fill in the information you need to set in the pop-up window

    CookieName: indicates the cookie name. From: source site; To: Target site;

Realize the principle of

Chrome-extension has an API that allows you to declare permissions and use them in the extension. The implementation details are as follows:

The statementpermissions

Declare the permissions to use in the global configuration file

// mainifest.json
"permissions": ["storage"."* : / / * /"."cookies"].Copy the code

Browser behavior

  1. Configuring browser behavior

Default_popup is the popup page displayed when the extension icon is clicked in the browser.

// mainifest.json
"browser_action": {
    "default_icon": "sources/icon128.png"."default_title": "Solve the problem of cross-domain Cookie portability in Chrome"."default_popup": "index.html"
},
Copy the code

We need to enter the relevant configuration items in the pop-up page, so this configuration is necessary.

  1. The pop-up page

We can configure it in the pop-up pagecookieName: Cookie name;from: source site;to: Target site;Its core logic is to add and delete, trigger changes to localstorage.

localStorage.setItem("domainList".JSON.stringify(domainList));
Copy the code

Background page

  1. Configuration Background page

The background page can use the permissions declared in the manifest file

// mainifest.json
"background": {
        "scripts": ["background.js"]."persistent": true
    },
Copy the code
  1. Background page

First listen to localStorage changes, triggering the cookie modification logic

window.addEventListener("storage".({ key, newValue, oldValue }) = > {
    if (key === "domainList") {
        // Compare the changed data to determine whether to add or delete
        newValue = JSON.parse(newValue) || [];
        oldValue = JSON.parse(oldValue) || [];
        storageList = newValue;
        if (newValue.length > oldValue.length) {
            // Add the last item to the list
            init(newValue.slice(-1));
        } else {
            / / remove the cookie
            const deleteValue = oldValue.find(e= >! newValue.some(n= > n === e));
            console.log("deleteValue", deleteValue);
            chrome.cookies.remove({
                url: "https://" + deleteValue.to,
                name: deleteValue.name, }); }}});Copy the code

When the cookie configured to listen changes, the cookie of the corresponding toDomain also changes. Here we need to use the changed storageList saved in the previous step

// Get all cookie changes
chrome.cookies.onChanged.addListener(function (changeInfo) {
    const fromList = storageList.map(e= > e.from);
    // Filter out the listening cookie
    if (fromList.includes(changeInfo.cookie.domain)) {
        const target = storageList.find(e= > e.from === changeInfo.cookie.domain);
        / / remove
        if (changeInfo.removed) {
            chrome.cookies.remove({
                url: "https://" + target.to,
                name: changeInfo.cookie["name"]}); }// Set or update
        else {
            chrome.cookies.set({
                url: "https://" + target.to,
                name: changeInfo.cookie["name"].path: "/".value: changeInfo.cookie["value"].expirationDate: changeInfo.cookie["expirationDate"].secure: true.sameSite: "no_restriction".// Do not block cross-domain cookies}); }}});Copy the code

conclusion

Chrome extensions exist to overcome browser security limitations and obtain many permissions that cannot be obtained in JAVASCRIPT scripts. More flexible and efficient. If you encounter a difficult requirement in your daily development, try chrome-Extension.

There is no such thing as a bicycle that can’t be built.

Source repository address: github.com/aMiing/chro…