Question

我使用以下数据创建了一个简单的chrome扩展，但由于某种原因它不能一直工作，有时我需要点击扩展按钮才能使它在下一个当前选项卡中工作。我无法理解为什么......当您单击选项卡并激活它时它应该始终有效（即使您创建了新选项卡 - 它也会被激活并且应该运行do-something.js

的manifest.json

{
  "manifest_version": 2,

  "name": "Test",
  "description": "Test",
  "version": "1",

  "browser_action": {
    "default_icon": "icon.png",
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions": [
    "activeTab",
    "tabs"
  ]
}

background.js

chrome.tabs.onActiveChanged.addListener(function () {
  chrome.tabs.executeScript({
    file: 'do-something.js'
  });
});

做-something.js

function createNotification() {
  var notification = document.createElement('div');
  Object.assign(notification.style, {
    position: 'fixed',
    zIndex: 10000,
    textAlign: 'center',
    width: '100%',
    background: '#f5ae20',
    padding: '5px',
    top: 0,
    left: 0
  });
  notification.innerHTML = `Test`;
  document.body.appendChild(notification);
  setTimeout(function() {
    notification.remove();
  }, 4000);
  return notification;
}
createNotification();

为什么它不能一直工作？

Answer 1

您的代码存在一些问题。清单文件中应该提及do-something.js，否则chrome将找不到任何内容，您可以将其作为内容脚本，后台脚本或 Web可访问资源

但是如果你把它作为内容脚本放在每次页面加载（根据）你当前代码时运行它。

这是我的方法我将do-something.js放在内容脚本中，并在后台js和内容脚本之间建立了一个通信通道，当它在后台发现活动标签已更改，然后向内容脚本发送消息并显示通知

从背景传递的消息

//listener for detecting tab change
chrome.tabs.onActiveChanged.addListener(function () {
  console.log("tab changed");
  //query about the active tab and get the tab id
  //if you add debug point here it will throw exception because debugger is the current active window , which doesnot have tab
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    //send the message to the content sctipt
    chrome.tabs.sendMessage(tabs[0].id, "showNotification", null);//here null is the callback
  });
});

内容脚本上的消息接收

chrome.runtime.onMessage.addListener(
  function (message, sender, sendResponse) {
    //you can receive  different type of message here
    if (message == "showNotification") {
      createNotification();
    }
  });

我为你添加了一个github repo，你可以在那里找到更多细节。 https://github.com/pfrng/tabChangeListener

由于

onActiveChanged每次都不工作

1 个答案: