Chrome扩展内容脚本中Int变量重置问题：如何保留变量状态？

你的核心问题在于：Chrome扩展的内容脚本会在每次页面加载（包括跳转、刷新）时重新注入并执行一遍，所以你在内容脚本顶部定义的var myint = 1;会被重复初始化，导致之前设置的0状态丢失。内容脚本的全局变量只存在于当前页面的生命周期中，页面一旦重新加载，这些变量就会被重置。

下面提供两种可靠的方法来持久化myint的状态：

方法1：使用 localStorage 存储状态（简单快捷） #

利用localStorage在同域名下持久化数据的特性，把myint的值存在本地存储中，每次页面加载时从存储读取，而不是硬编码初始值。

修改你的content.js代码：

初始化变量 #

// 从localStorage读取myint，若不存在则默认设为1（注意转换为数字类型）
var myint = parseInt(localStorage.getItem('myint')) || 1;
var clicker;

更新window.onload逻辑 #

window.onload = function () {
  var elm = document.getElementById("my-container");
  if (elm != undefined && elm != null) {
    localStorage['launched'] = "yes";
  } else {
    // 只有当myint仍大于0时才启动定时器
    if (myint > 0) {
      clicker = setInterval(click, 30 * 1000);
    }
  }
}

修改click函数 #

function click() {
  if (myint > 0) {
    myint = myint - 1;
    // 将更新后的值存入localStorage，确保页面刷新后状态不丢失
    localStorage.setItem('myint', myint);
    clearInterval(clicker);
    document.getElementById('elementID').click();
    alert("clicking now");
  }
}

优点：实现简单，无需和后台交互；缺点：localStorage仅在同域名下共享，如果你的扩展需要跨域名保持状态，这种方法不适用。

方法2：使用扩展后台页面管理全局状态（跨域名适用） #

你的manifest已经配置了持久化的后台页面，后台页面的生命周期和扩展绑定，不会随页面加载重置，非常适合管理全局状态。我们可以通过消息传递让内容脚本和后台通信，获取/更新myint的值。

第一步：修改background.js #

// 在后台页面维护全局状态
let myint = 1;

// 监听内容脚本的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  switch(message.type) {
    case 'getMyInt':
      sendResponse(myint);
      break;
    case 'updateMyInt':
      myint = message.value;
      sendResponse(true);
      break;
  }
});

第二步：修改content.js #

var clicker;

// 页面加载时先从后台获取最新的myint状态
chrome.runtime.sendMessage({type: 'getMyInt'}, (response) => {
  window.myint = response;
  // 状态获取完成后初始化页面逻辑
  initPage();
});

function initPage() {
  window.onload = function () {
    var elm = document.getElementById("my-container");
    if (elm != undefined && elm != null) {
      localStorage['launched'] = "yes";
    } else {
      if (window.myint > 0) {
        clicker = setInterval(click, 30 * 1000);
      }
    }
  }
}

function click() {
  if (window.myint > 0) {
    window.myint = window.myint - 1;
    // 通知后台更新全局状态
    chrome.runtime.sendMessage({type: 'updateMyInt', value: window.myint});
    clearInterval(clicker);
    document.getElementById('elementID').click();
    alert("clicking now");
  }
}

优点：状态全局共享，跨所有匹配的域名生效；缺点：需要额外的消息传递逻辑，比localStorage稍复杂。

• 使用localStorage时，记得始终做类型转换，因为存储的是字符串，直接读取会导致数字比较出错。
• 如果选择后台管理状态，确保你的manifest中已经声明了tabs权限（你已经加了），消息传递才能正常工作。
• 若后续升级到Manifest V3，后台页面会变成服务工作者，持久化逻辑需要调整为使用chrome.storage，不过当前你的Manifest V2配置可以直接用上面的方法。

内容的提问来源于stack exchange，提问作者Ibrahim D.