Chrome 扩展:在浏览器操作中,创建弹出窗口并执行脚本

2023-12-19

我正在构建一个 Chrome 扩展程序,希望在用户单击 Chrome 中的浏览器操作图标时显示弹出窗口并运行脚本。

我可以通过将 '"default_popup": "popup.html"' 放入 manifest.json 来实现弹出窗口。但是,当我这样做时,background.js 似乎没有运行。当我删除 '"default_popup": "popup.html"' 时,background.js 似乎会运行。

如何同时显示弹出窗口和运行脚本?

清单.json

{
  "manifest_version": 2,

  "name": "Typo Blaster",
  "description": "Blast away typos and make the internet a safer place for the kids.",
  "version": "0.1",

  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Blast the typo!",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" }
}

弹出窗口.html

<!doctype html>
<html>
  <head>
    <title>Typo Blaster</title>
    <style>
      body {
        min-width: 357px;
        overflow-x: hidden;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 75px;
        height: 75px;
      }
    </style>

    <script src="popup.js"></script>
  </head>
  <body>
    <h1>Got it!</h1>
  </body>
</html>

背景.js

chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  console.log('Turning ' + tab.url + ' red!');
  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="red"'
  });
});

alert('hello ' + document.location.href);

你不能使用onClicked当您有弹出页面时的方法。谷歌文档 https://developer.chrome.com/extensions/browserAction#event-onClicked.

onClicked:单击浏览器操作图标时触发。该事件不会触发 如果浏览器操作有弹出窗口。

如果你想同时保留两者,请考虑写一个内容脚本 https://developer.chrome.com/extensions/content_scripts.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Chrome 扩展:在浏览器操作中,创建弹出窗口并执行脚本 的相关文章

  • 如何在Tensorflow中读取json文件?

    我正在尝试编写一个函数 用于读取张量流中的 json 文件 json 文件具有以下结构 bounding box y 98 5 x 94 0 height 197 width 188 rotation yaw 27 970195770263
  • 为什么这个 fs.readFile 循环没有将其结果推送到我的数组? [复制]

    这个问题在这里已经有答案了 usr bin env node var fs require fs async require async program require commander program version 0 0 1 usa
  • 递归process.nextTick警告

    作为我的应用程序的一部分 我有以下代码行 process nextTick function pre populate cache with all users console log scanning users table in ord
  • 闭包和异步 Node.js 函数

    All 尝试了解 Node js 上下文中的闭包 异步调用 我有以下代码 timer setInterval pollOID 1000 function pollOID for channel in channels session get
  • xsl 方法中的自关闭标签:xml

    我正在使用一个使用 xsl method xml 创建 html 模板的网站 但是 当 xsl 引擎呈现 html 页面时 我遇到了标签自动关闭的问题 div div 转换为 gt div div 该方法需要保留 xml 否则页面的其他组件
  • onclick链接/按钮获取数据属性值

    span class btn btn block btn inverse btn icon glyphicons home i i Daily span span class btn btn block btn inverse btn ic
  • 链接index.html client.js 和 server.js

    我从 Node js 开始 我的第一个程序已经遇到了问题 下面是我正在使用的代码 索引 html
  • Chrome 扩展程序导致 DOM 闪烁,该扩展程序会在页面加载之前删除 DOM 元素

    我正在编写一个 chrome 扩展 我想在页面加载之前删除内容 例如this http tech blog tomchambers me 2016 01 13 How to write a simple page rewriting Chr
  • 我以为我了解范围

    有人可以告诉我为什么 x 的最后一次记录等于0而不是1 我想因为它是在函数之外声明的 所以它具有全局范围 然后在函数中它的值设置为1并且该值将保持原样一个全球性的 我知道函数内的第一个 x 值是全局的 因为没有 var 关键字声明的任何变量
  • 如何获取div背景图像上的锚标记?

    HTML div a href http www facebook com au a div css facey float left width 32px height 32px background url file C Users U
  • 将变量从一个 jsp 发送到另一个 jsp

    我有一个 JSP 文件jsp 1 jsp和另一个 JSP 文件jsp 2 jsp 我已经包括了jsp 2 jsp in jsp 1 jsp using 现在我需要某个元素上的单击事件 在该事件中 我想将字符串变量传输到包含的 jsp 中 假
  • 带搜索框的 D3 图表

    我在 D3 中创建了一个图表 其中节点显示特定个人创建文档的时间 该图表还显示了一个搜索框 该搜索框根据搜索框输入是否与与该文档关联的单词匹配而将节点变成红色 这些单词列在数据集的第 5 列中 请参阅下面的数据集 我的问题 一旦将搜索输入到
  • 将 html

    我有一些服务器端代码当前支持 http 字节范围请求 没有任何问题 但是 我希望能够在将转码后的块发送到客户端之前使用 ffmpeg 即时转码视频文件 位于磁盘上 但 ffmpeg 要求我在获取字节时给它一个寻道时间范围来自客户 给定客户端
  • 当 JavaScript 抛出异常时不要停止它

    我正在使用 JavaScript 编写一个 Windows 边栏小工具 现在我想捕获所有 JavaScript 异常并将其记录到文本文件中 一个问题是 当任何一行抛出异常时 下一行将不会被执行 是否可以自动捕获异常 以便执行以下 JavaS
  • 如何在 JSON 输出上强制采用 ISO 格式“YYYY-MM-DDThh:mm:ss.sss”?

    我有一个 ASP NET WebApi2 api 它返回一些 JSON 格式的时间戳 时间戳具有毫秒分辨率 通常我会得到这种格式的时间戳 这很好 YYYY MM DDThh mm ss sss 不幸的是 如果时间戳恰好用整秒对日期进行编码
  • jQuery:array[i].children() 不是函数

    以下代码的灵感来自http ignorethecode net blog 2010 04 20 footnotes http ignorethecode net blog 2010 04 20 footnotes 当您将光标移到脚注符号上时
  • 使用 Python 和 lxml 从 HTML 中删除类属性

    Question 如何使用 python 和 lxml 从 html 中删除类属性 Example I have p class DumbClass Lorem ipsum dolor sit amet consectetur adipis
  • 使用 HTML 标签作为背景图像而不是 CSS background-image 属性?

    我需要使用 html img 标签作为背景图像 div 然后我将放置一个 p 的内容 我已经尝试过 但似乎无法让它们正确显示 我使用了相对位置 负值的边距 任何建议或指出我正确的方向将不胜感激 p div img src http www
  • JQuery 循环遍历动态元素并获取数据值

    我正在尝试使用可折叠面板来完成我的要求 sport on click function var thisId this attr id var thisChildren this sportlist thisChildren each fu
  • 将画布下载为 PNG 图像[重复]

    这个问题在这里已经有答案了 当我尝试将画布下载为 PNG 图像时 浏览器会在新页面中打开该图像 但不下载它 我的下载代码 btnScaricaEtichetta click function console log Download loc

随机推荐