Question

我正在开发一个chrome扩展程序，它将HTML注入页面并对某些按钮具有onClick功能。这是示例代码。

Namespace.js

/**
 * Namespace for this content script.
 * @const
 */
var namespace = {};

/**
 * HTML text to be injected.
 */
namespace.HTML = '<input type="text" size="2" placeholder="0.50"' +
                 'onkeyup="namespace.enable(event)" />';

document.body.insertAdjacentHTML('afterbegin', namespace.HTML);

namespace.enable = function() {
  alert('Hello World!')
};

HTML正在正确注入，但命名空间无法识别。这是错误

Uncaught ReferenceError: namespace is not defined 
onkeyup

有任何解决方法吗？

由于

Answer 1

当它被称为：

时，它适用于Firefox，Chrome和IE 9

window.onload = function() {
  document.body.insertAdjacentHTML('afterbegin', namespace.HTML);
};

Answer 2

内容脚本在所谓的isolated world中运行。它不能

使用其扩展程序页面定义的变量或函数

使用由网页或其他内容脚本定义的变量或函数

因此，您可能需要将您的命名空间作为另一段js注入HTML页面。

Answer 3

正如@zhuzhour所提到的，内容脚本在一个孤立的世界中运行，页面中的JavaScript无法访问内容脚本定义的变量。

如果你想这样做，你需要在页面中注入JavaScript文件，正如我在其他答案中概述的那样：https://stackoverflow.com/a/13037307/315562

换句话说，使用以下content.js文件注入namespace.js。

content.js

injectScript( chrome.extension.getURL( "/" ), "namespace.js" );
function injectScript ( aBasePath, aScriptURL ) {
  var scriptEl = document.createElement( "script" );
  scriptEl.src = aBasePath + aScriptURL;
  scriptEl.async = false;

  (document.body || document.head || document.documentElement)
  .appendChild( scriptEl );
}

您可以将此作为起点。如果您需要与Chrome扩展程序进行通信，则需要在注入的JavaScript文件中使用window.postMessage来发送消息并在内容脚本中接收消息。

内联事件处理程序中的变量“未定义”？

3 个答案:

content.js