Question

我已经尝试了一段时间，但我无法在我的背景页面js文件上调用任何方法。

我的清单看起来像这样：

{
  "name" : "First chrome extension",
  "version" : "0.0.1",
  "manifest_version" : 2,
  "browser_action" : {
    "default_title" : "Practice",
    "default_icon" : {
      "16" : "assets/images/icon16.png",
      "24" : "assets/images/icon24.png",
      "32" : "assets/images/icon32.png"
    },
   "default_popup" : "popup.html"
  },
  "background" : {
    "scripts" : ["background.js"]
  },
  "content_scripts" : [{
    "matches" : ["*://*/*"], 
    "js" : [
      "assets/js/jquery-3.2.1.slim.min.js",
      "assets/js/content.js"
     ]
  }],
  "permissions" : [
    "activeTab",
    "storage"
  ]
}

background.js：

function test()
{
  return 'called';
}

资产/ JS / popup.js：

console.log(chrome.extension.getBackgroundPage().test());

我看到的大多数示例都使用了chrome.extension.getBackgroundPage方法来检索背景但是每当我尝试这个方法时，它告诉我我在background.js中设置的方法或任何其他变量是未定义的，它们不存在在返回的窗口对象上。

我也尝试使用这样的消息传递API： background.js

"use strict";

const test = function() {
    console.log(1);
}

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse){
    console.log(request);  
    if(request.msg.toLowerCase()  === "bg-test") test();
  }
);

资产/ JS / popup.js：

$(function() {
  const btn = '#en-dis-btn';
  $(btn).click(function(e){
    e.preventDefault();
    chrome.runtime.sendMessage({'msg' : 'bg-test'}, function(response) {
       console.log(response);
    });
  });
});

但是从不调用background.js中的监听器。我能做错什么？后台页面不为空，因此它正在加载某些内容。

Answer 1

根据ECMA specification：

let和const声明定义了作用于正在运行的执行上下文的LexicalEnvironment的变量。

当您在一个页面（背景页面）中全局声明let / const变量时，变量的LexicalEnvironment的范围是该页面的全局this（等于页面＆＃39; s window）和另一个页面（弹出窗口）明显超出了该范围。

使用var foo = bar或function foo() {}声明，将其公开为window对象的属性，以便在另一个同源中可见chrome-extension://*extensionID*页面，例如弹出页面。

Chrome扩展程序无法调用后台页面

1 个答案: