javascript - 无法将 API 连接到 Chrome 扩展

Question

我正在开发 chrome 扩展。单击 popup.html 中的按钮后，我想将一些 API 连接到当前选项卡.我在 popup.js 中使用此代码:

$('button').click(function() {
    chrome.tabs.executeScript({
        file: 'js/ymaps.js'
    }, function() {});
});

在ymaps.js我使用以下代码将 API 连接到当前选项卡:

var script = document.createElement('script');
script.src = "http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU";
document.getElementsByTagName('head')[0].appendChild(script);

使用 Yandex map 需要此 API。因此，在该代码之后我创建了 <div> map 应该放在哪里:

$('body').append('<div id="ymapsbox"></div>');

而这个简单的代码只加载映射到创建的 <div> :

ymaps.ready(init);//Waits DOM loaded and run function
var myMap;
function init() {
    myMap = new ymaps.Map("ymapsbox", {
        center: [55.76, 37.64],
        zoom: 7
    });
}

我想，一切都清楚了，如果您还在阅读，我会解释问题所在。当我点击 popup.html 中的按钮时我进入 Chrome 的控制台 Uncaught ReferenceError: ymaps is not defined .好像 api 库没有连接。但!当我手动输入控制台时 ymaps - 我得到了可用方法的列表，因此库已连接。那么为什么当我调用ymaps -来自已执行的对象 .js -file 我得到这样的错误？

UPD:我还尝试包装 ymaps.ready(init)在 $(document).ready()功能:

$(document).ready(function() {
    ymaps.ready(init);
})

但错误仍然出现。下面的人说 api 库可能还没有加载。但是这段代码也会产生错误。

   setTimeout(function() {
        ymaps.ready(init);
    }, 1500);

我什至尝试过这样做...

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
    if (changeInfo.status == "complete") {
        chrome.tabs.executeScript({
            file: 'js/gmm/yandexmaps.js'
        });
    }
});

Answer 1

ymaps未定义，因为您试图在内容脚本中使用它，而库是在页面上下文中加载的(通过 <script> 标记)。

通常，您可以通过将库加载为内容脚本来解决问题，例如

chrome.tabs.executeScript({
    file: 'library.js'
}, function() {
    chrome.tabs.executeScript({
        file: 'yourscript.js'
    });
});

但是，这不会解决您的问题，因为您的库在 <script> 中加载了更多的外部脚本。标签。因此，部分库仅对网页内的脚本可见(而不是内容脚本，因为单独的 script execution environments )。

解决方案1:拦截<script>标记并将它们作为内容脚本运行。

获取scriptTagContext.js来自 https://github.com/Rob--W/chrome-api/tree/master/scriptTagContext ，并在其他内容脚本之前加载它。此模块通过更改 <script> 的执行环境来解决您的问题(在内容脚本中创建)到内容脚本。

chrome.tabs.executeScript({
    file: 'scriptTagContext.js'
}, function() {
    chrome.tabs.executeScript({
        file: 'js/ymaps.js'
    });
});

参见 Rob--W/chrome-api/scriptTagContext/README.md 用于文档。
查看first revision of this answer用于解释解决方案背后的概念。

解决方案 2:在页面上下文中运行

如果您 - 不知何故 - 不想使用以前的解决方案，那么还有另一个选项可以让代码运行。我强烈反对这种方法，因为它可能(并且将会)导致其他页面发生冲突。尽管如此，为了完整起见:

通过 <script> 插入内容脚本，在页面上下文中运行所有代码页面中的标签(或至少是使用外部库的扩展部分)。这仅在您不使用任何 Chrome 扩展 API 时才有效，因为您的脚本将在网页的有限权限下有效运行。

例如，您问题中的代码将重构如下:

var script = document.createElement('script');
script.src = "http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU";
script.onload = function() {
    var script = document.createElement('script');
    script.textContent = '(' + function() {
        // Runs in the context of your page
        ymaps.ready(init);//Waits DOM loaded and run function
        var myMap;
        function init() {
            myMap = new ymaps.Map("ymapsbox", {
                center: [55.76, 37.64],
                zoom: 7
            });
        }
    } + ')()';
    document.head.appendChild(script);
};
document.head.appendChild(script);

这只是将脚本的执行上下文切换到页面的众多方法之一。阅读Building a Chrome Extension - Inject code in a page using a Content script了解有关其他可能选项的更多信息。