Question

我的chrome扩展程序生成一个temp .html页面。我想操作创建的sample.html页面的DOM，但不能。我可以为任何其他页面操作DOM，而不会出现问题。问题似乎出在我的temp .html页面位于chrome-extension：//

错误消息： 运行tabs.executeScript时未经检查的runtime.lastError：无法访问URL“ chrome-extension：//123/sample.html？id = 100”的内容。扩展清单必须请求访问此主机的权限。

注意：为简单起见，我提供了显示相同错误的示例代码。加载后，我可以使用组合键将div和一些文本插入任何网页（Mac-> Cmd + Shift + P或PC Ctrl + Shift + P）

我尝试将所有可能的权限甚至web_accessible_resources添加到manifest.json。（我认为这不是问题）。我尝试了不同的方法，通过调用特定的tabId，activeTab甚至在后台文件中将tabId设置为null来将代码注入sample.html。我已经阅读了stackoverflow，在Google上搜索并环顾四周，但是结果很短。

manifest.json

   {
    "manifest_version": 2,
    "name": "sample1",
    "description": "sample1",
    "version": "0.0.1",

    "browser_action":
    {
        "default_title": "sample"
    },
    "commands":
    {
        "saveImageCommand":
        {
            "suggested_key":
            {
                "default": "Ctrl+Shift+Z",
                "mac": "Command+Shift+Z"
            },
            "description": "Toggle Save Image"
        },
        "playback":
        {
            "suggested_key":
            {
                "default": "Ctrl+Shift+P",
                "mac": "Command+Shift+P"
            },
            "description": "load player Image"
        }
    },
    "permissions": [
        "tabs",
        "activeTab",
        "storage",
        "<all_urls>",
        "*://*/*"


    ],

    "background":
    {
        "persistent": false,
        "scripts": ["background.js"]
    }
    ,
    "web_accessible_resources": [
    "chrome-extension://*/sample.html?id=*"
  ]
}

background.js

chrome.commands.onCommand.addListener(function(command) {
    if (command === 'saveImageCommand') {
        capturecurrent();
    }
    if (command === 'playback') {
        chrome.tabs.executeScript(null, {
            code: 'var divNode = document.createElement("div");divNode.setAttribute("id", "video1Div");var instructions = document.createTextNode("testing");divNode.appendChild(instructions);document.body.appendChild(divNode)'
        });
    }

});

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.captureVisibleTab(function(screenshotUrl) {
        var viewTabUrl = chrome.extension.getURL('sample.html')
        chrome.tabs.create({ url: viewTabUrl });
    });
});

sample.html

<html>
<head></head>
<body>
<div id="firstDiv">firstDiv</div>
</body>
</html>

预期结果： 对于我来说，可以直接与temp sample.html页面上的DOM进行交互。

注意： 我不想直接在sample.html页面中构建用于DOM操作的按钮。这违反了本练习的目的。 Esp，因为我想使用快捷键组合来调用此DOM操作（Mac-> Cmd + Shift + P或PC Ctrl + Shift + P）

实际结果： 我可以使用快捷键组合与任何普通网站上的DOM交互，但不能以URL以chrome-extension：//

开头的sample.html进行交互

尝试将Dom添加到chrome-extension：// URL

0 个答案: