通过弹出 chrome 扩展更改变量

Question

我正在做 Chrome 扩展，但遇到了问题。应该是点击页面上的按钮。

我想使用一个可以通过弹出窗口更改的变量，因为我不想一直转到脚本并更改变量。我该怎么做？

我想通过弹出窗口更改变量 sku。

清单：

{
      "name": "Clicker",
      "manifest_version": 2,
      "version": "0.0.1",
         "browser_action": {
         "default_popup": "popup.html",
         "default_title": "popup",
         "default_icon": "icon.png"
             },
      "description": "Clicker",
        "content_scripts": [
        {
            "matches": ["https://www.zalando.pl/*"],
            "js": ["content.js"]
        }
    ],
        "permissions": [
        "tabs", "storage" ,"activeTab", "http://*/*", "https://*/*",    
        "<all_urls>",
            "*://*/*",
            "tabs",
            "storage", 
            "webRequest",
            "webRequestBlocking",
        "webNavigation",
        "alarms",
        "cookies"
      ]
}

popup.html

<html>
    <body>
    <h1>Esensial Scripts</h1>
    <input type="text" id="sku" placeholder="Enter Sku Here"/>
    <input type="submit" id="Save" value="Save"/>
    </body>
</html>

content.js

var spicker = "size-picker-";
var sku = "NI112O0J9-A110075000";

//example var sku = "XXXXXXXXX-XXXXXXXXXX";
                 
const sleep = (milliseconds) => {
        return new Promise(resolve => setTimeout(resolve, milliseconds))
}
    
window.addEventListener('load', function () {
    sleep(1).then(() => {
        document.getElementById(spicker + sku).click();
    })
})

Answer 1

将按钮的名称保存到 chrome 存储（您需要为弹出 html 添加新的 javascript 代码）：

window.onload = function(){
    document.getElementById('Save').onclick = function(){
        var value = document.getElementById('sku').value;
        
        chrome.storage.sync.set({'myLine': value}), function() {
            console.log("you saved me!!");
        });
}

向 popup.html 添加新脚本：

<script src="popup.js"></script>

并检查 chrome 存储在 content.js 中：

var spicker = "size-picker-";

const sleep = (milliseconds) => {
        return new Promise(resolve => setTimeout(resolve, milliseconds))
}
    
window.addEventListener('load', function () {
    chrome.storage.sync.get('myLine', function(result){ 
        sleep(1).then(() => {
            document.getElementById(spicker + result.myLine).click();
        })
    });
    
})

通过弹出 chrome 扩展更改变量

Change of variables via popup chrome extension

html

javascript

popup