时间戳

首页 > 解决方案 > Chrome 扩展程序 - 在 popup.html 中为当前选项卡激活脚本

javascript - Chrome 扩展程序 - 在 popup.html 中为当前选项卡激活脚本

问题描述

我不确定如何正确地问这个问题，因为它很难解释，所以我将使用一个例子。

我想要做的是弄清楚如何使用将与当前选项卡交互的chrome扩展的popup.html内的链接来激活诸如书签之类的东西。

例如：如果您单击 chrome 扩展程序图标，则会出现一个弹出窗口（通常的下拉窗口）。在那个窗口中会说一个增加图像大小的按钮（如书签栏的书签）。

我想要的是该按钮与当前打开的选项卡而不是 popup.html 页面进行交互。

我在清单以及正在定义的脚本中拥有适当的权限（所有 url 和选项卡）。那里的一切都测试正常。但我知道我的解决方案（不工作）可能离题太远了，我什至可能还没有接近。所以我在这里寻求帮助。

背景.js

function zii() {

    function zoomImage(image, amt) {
        if (image.initialHeight == null) { /* avoid accumulating integer-rounding error */
            image.initialHeight = image.height;
            image.initialWidth = image.width;
            image.scalingFactor = 1;
        }
        image.scalingFactor *= amt;
        image.width = image.scalingFactor * image.initialWidth;
        image.height = image.scalingFactor * image.initialHeight;
    }
    var i, L = document.images.length;
    for (i = 0; i < L; ++i) zoomImage(document.images[i], 2);
    if (!L) alert("This page contains no images."); 

}

popup.html

<button onClick="zii()">Test</button>

后台功能也链接到 popup.html 页面内部。实际的 popup.html 页面非常大，所以我只是在这里展示了它的基础知识，而不包括与扩展的其他方面有关的所有相关代码。

我显然不知道我做错了什么，或者我正在尝试的事情是否可能。

目标总结： 简单地说，我只想单击 popup.html 中的按钮并增加当前打开的选项卡上图像的大小（与使用小书签执行此操作的方式相同）。

标签： javascriptgoogle-chrome-extensionbookmarklet

解决方案

首先我推荐阅读扩展架构。

如果您想通过单击弹出窗口中的按钮在当前窗口中注入 .js 文件或某些代码，您只需chrome.tabs.executeScript在按钮 onclick 处理程序中使用，同时null作为第一个tabId参数传递，因为它默认为活动选项卡的当前窗口。

例如：

chrome.tabs.executeScript(null, {
    code: "console.log('Injected.')"
});

或者：

chrome.tabs.executeScript(null, {
    file: "content.js"
});

确保也有"activeTab"您的manifest.json权限。

推荐阅读