如何在 chrome 擴展中設置全局變量

Question

我在 chrome 擴展上工作，它有一個在 background.js 的第一行中設置的 const 用戶，當我更改它的值並稍后在不同的 function 中使用它們時，它們總是在開始時返回到它們的設置值。

我在網上閱讀了有關提升的信息，它是問題的根源，但我該如何避免它，這樣我才能真正操縱變量並在以后毫無問題地使用它們。

我還看到了 globalThis 的使用，但是當我嘗試使用 globalThis 調用或設置函數中的值時，它也不起作用。

這是我的第一行 background.js：

var user={
connection:undefined,
id:"id",
username:"username",
room:["id","password","url","tabid","ishost"],
room_members:[],
in_room:false,
room_process:[false,"intervelId"],
current_tab:["url","id"]

}

在設置用戶的一些值時，我也嘗試使用 globalThis，如下所示：

function connect(){
   globalThis.user.connection = new WebSocket('ws://192.168.3.16:8765'); 
   globalThis.user.connection.onopen = function(e) {
     globalThis.user.connection.send("get_id");
   };
   globalThis.user.connection.onmessage=function(event){
      let data=event.data.split(',');
    
      let temp_i=data[0]
      globalThis.user.id=temp_i;

      let temp_u=data[1]
      globalThis.user.username=temp_u;
    
    console.log("connection: ",user.id,",",user.username);
   };    
   
}

例如，如果我從最后一個 function 中得到 user.id="Oak"，當我嘗試像這樣回憶另一個 function 中的值時：

function test(){
   console.log(user.id);
}

它顯示“id”而不是“Oak”

編輯

我嘗試通過將 var 用戶放在程序的 onInstalled 事件中來使用 storage.local，然后通過兩個函數我可以從本地存儲中獲取用戶的當前值，然后也更新它。

這是我的代碼：

var 用戶的第一個初始化：

chrome.runtime.onInstalled.addListener(async () => {
//opens welcome page
let url = chrome.runtime.getURL("htmls/hello.html");

let tab = await chrome.tabs.create({ url });

//setting up the user var in chrome's local storage

chrome.storage.local.get(['userLocal'], async function (result) {

    var user={
        connection:undefined,
        id:"id",
        username:"username",
        room:["id","password","url","tabid","ishost"],
        room_members:[],
        in_room:false,
        room_process:[false,"intervelId"],
        current_tab:["url","id"]
        }
    chrome.storage.local.set({userLocal: user}, function () {}); // save it in local.
    
});

//connect to server and recive id 
connect()

});

兩個函數 function：

function get_user(){
chrome.storage.local.get(['userLocal'], async function (result) {
    var userLocal = result.userLocal;
    return userLocal;
});

}

function update_user(tmp_user){
chrome.storage.local.get(['userLocal'], async function (result) {
    var userLocal = tmp_user;
    chrome.storage.local.set({userLocal: userLocal}, function () {}); // save it in local.
    return userLocal;
});  

}

例如，如果我使用我寫的內容：

function connect(){

var user=get_user();

user.connection = new WebSocket('ws://192.168.3.16:8765'); //'ws://192.168.3.16:8765'
user=update_user(user);

}

我收到此錯誤：“未捕獲（承諾）類型錯誤：無法設置未定義的屬性（設置‘連接’）”

Answer 1

問題是后台 service worker在需要時加載，空閑時卸載。 因此，在閑置幾秒鍾后，后台腳本會自行卸載，使您丟失對用戶 object 所做的更改。

您可以將用戶 object 保存在chrome.storage.local中，然后從那里讀取和修改。 是這樣的：

// background.js; "initial lines" =>

chrome.storage.local.get(['userLocal'], async function (result) {
let userLocal = result.userLocal
if (userLocal === undefined) {
    // it means there was nothing before. This way you don't overwrite
    // the user object every time the backgorund.js loads.
    var user={
        connection:undefined,
        id:"id",
        username:"username",
        room:["id","password","url","tabid","ishost"],
        room_members:[],
        in_room:false,
        room_process:[false,"intervelId"],
        current_tab:["url","id"]
        }
    chrome.storage.local.set({userLocal: user}, function () {}); // save it in local.
}})

當您想要修改用戶時，您可以從本地檢索它並修改結果，然后再將其保存回localStorage 。

// example of modifying a property =>

chrome.storage.local.get(['userLocal'], async function (result) {
let userLocal = result.userLocal
if (userLocal !== undefined) {
    userLocal.connection = new WebSocket('ws://192.168.3.16:8765');
    // ...

    chrome.storage.local.set({userLocal: userLocal}, function () {}); // save it in local.
}})

您也可以只讀取用戶屬性，而不修改它們並將它們保存回localStorage 。

＃＃＃＃＃＃＃＃＃＃＃＃ 編輯：

因為chrome.storage.local是異步的，所以嘗試像這樣轉換你的代碼：

async function get_user(){
    return new Promise(async function (res, rej) {
      chrome.storage.local.get(['userLocal'], async function (result) {
          var userLocal = result.userLocal;
          res(userLocal);
      });
    });
}

var user= await get_user(); // call it like this.