编写Chrome标签页循环扩展时遇未定义函数错误求助

我正在编写一个实现标签页循环切换的Chrome扩展，但遇到了如下错误：

Uncaught ReferenceError: startTabCycle is not defined

错误出现在popup.js文件中，相关代码如下：

document.addEventListener('DOMContentLoaded', function () {
var startBtn = document.getElementById('startBtn');
var stopBtn = document.getElementById('stopBtn');

// Add event listeners to the buttons
startBtn.addEventListener('click', startTabCycle);
stopBtn.addEventListener('click', stopTabCycle);
});

我的popup.html代码：

<!DOCTYPE html>
<html>
<head>
  <title>Tab Cycling Control</title>
  <script src="popup.js"></script>
</head>
<body>
  <h1>Tab Cycling Control</h1>
  <form id="controlForm">
    <button type="button" id="startBtn">Start</button>
    <button type="button" id="stopBtn">Stop</button>
  </form>    
</body>
</html>

manifest.json文件：

{
"manifest_version": 2,
"name": "Tab Cycling",
"version": "1.0",
"permissions": ["tabs", "windows"],
"background": {
  "scripts": ["background.js"],
  "persistent": false
},
"browser_action": {
  "default_popup": "popup.html"
}
}

background.js文件：

let tabCycleIntervalId = null; // Track the interval ID

function startTabCycle() {
  chrome.tabs.query({}, function (tabs) {
    let index = 0;
    const interval = 10000; // Interval in milliseconds

    function cycleTabs() {
      chrome.tabs.update(tabs[index].id, { active: true });

      // Re-enter full-screen mode after switching tabs
      chrome.windows.getCurrent(function (currentWindow) {
       // chrome.windows.update(currentWindow.id, { state: 'fullscreen' });
      });

      index = (index + 1) % tabs.length;
    }

    // Start tab cycling and store the interval ID
    tabCycleIntervalId = setInterval(cycleTabs, interval);
    cycleTabs(); // Immediately switch to the first tab
  });
}

function stopTabCycle() {
  // Clear the interval when stopping the tab cycling
  clearInterval(tabCycleIntervalId);
}

chrome.runtime.onMessage.addListener(function (message) {
  if (message.action === 'startTabCycle') {
    startTabCycle();
  } else if (message.action === 'stopTabCycle') {
    stopTabCycle();
  }
});

错误原因 #

Chrome扩展中，popup脚本和background脚本运行在完全独立的上下文环境中，popup无法直接访问background里定义的函数。你在popup.js里直接把startTabCycle、stopTabCycle作为点击事件回调，自然会报“未定义”的错误。

修复步骤 #

修改popup.js，通过Chrome扩展的chrome.runtime.sendMessageAPI向background发送消息，触发对应的函数：

document.addEventListener('DOMContentLoaded', function () {
  var startBtn = document.getElementById('startBtn');
  var stopBtn = document.getElementById('stopBtn');

  startBtn.addEventListener('click', function() {
    chrome.runtime.sendMessage({action: 'startTabCycle'});
  });
  
  stopBtn.addEventListener('click', function() {
    chrome.runtime.sendMessage({action: 'stopTabCycle'});
  });
});

验证 #

你的background.js已经正确配置了chrome.runtime.onMessage监听器，能接收并处理startTabCycle和stopTabCycle类型的消息，修改popup.js后，点击按钮就能正常触发标签循环功能了。

内容的提问来源于stack exchange，提问作者Mark Tait