如何在chrome扩展中将google标签管理器插入到弹出窗口？

在Chrome扩展中将Google标签管理器插入到弹出窗口，可以按照以下步骤进行操作：

创建一个Chrome扩展项目，包括manifest.json文件和popup.html文件。
在manifest.json文件中添加必要的权限和配置，例如：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "permissions": [
    "tabs",
    "activeTab"
  ],
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["https://www.google.com/*"],
      "js": ["content.js"]
    }
  ]
}

在popup.html文件中创建一个弹出窗口，可以使用HTML、CSS和JavaScript来实现。

<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
  <style>
    body {
      width: 300px;
      height: 200px;
    }
  </style>
</head>
<body>
  <h1>Popup Window</h1>
  <button id="insertGTM">Insert Google Tag Manager</button>

  <script src="popup.js"></script>
</body>
</html>

在popup.js文件中编写JavaScript代码，以在点击按钮时将Google标签管理器插入到弹出窗口中。

document.getElementById('insertGTM').addEventListener('click', function() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(tabs[0].id, {file: 'gtm.js'});
  });
});

创建gtm.js文件，用于插入Google标签管理器的代码。

// 在这里插入Google标签管理器的代码

将Google标签管理器的代码复制到gtm.js文件中，以实现在弹出窗口中加载Google标签管理器。

完成以上步骤后，当点击弹出窗口中的按钮时，将会向当前活动的标签页注入gtm.js文件中的代码，从而实现在弹出窗口中加载Google标签管理器。

请注意，由于答案要求不能提及具体的云计算品牌商，因此无法提供腾讯云相关产品和产品介绍链接地址。

页面内容是否对你有帮助？

有帮助

没帮助

如何在chrome扩展中进行A/B测试

google-chrome、google-chrome-extension、google-analytics、google-optimize、google-analytics-4

我想在我的chrome扩展UI上做A/B测试。我开始使用google optimize，但是，它要求提供一个url。我相信其他供应商也会问同样的问题。在没有url的情况下，我该如何在chrome扩展中做A/B。附注:我的chrome扩展不是弹出窗口，而是注入到用户的DOM中。

浏览 11提问于2021-03-15得票数 3

1回答

如何在chrome扩展中将google标签管理器插入到弹出窗口？

angular、google-chrome-extension、google-tag-manager

我已经创建了chrome扩展。我在弹出的html中添加了google标签管理器脚本和没有脚本iframe，如下所示： new Date-- End Google Tag Manager --> </

浏览 42提问于2019-03-28得票数 0

回答已采纳

2回答

如何编写一个以"window.open()“打开的窗口为目标的Chrome扩展？

javascript、google-chrome、google-chrome-extension、google-chrome-devtools、google-docs

这个窗口看起来没有菜单栏，所以我做了一些研究，得出结论，它一定是用window.open()创建的。如果我错了，请纠正我，但我认为这意味着Chrome将该窗口视为弹出窗口，而不是它自己的独立标签。我还注意到，当我查看Chrome任务管理器时，“弹出”窗口与演示选项卡组合在一起，而不是显示为两个选项卡，这进一步证明了它是一个弹出窗口。我正在尝试编写一个在弹出

浏览 2提问于2015-02-02得票数 0

1回答

在Chrome扩展的弹出窗口中保留页面特有的数据？

google-chrome、google-chrome-extension、popup、local-storage

我正在构建一个Chrome扩展，我希望能够保留特定于正在查看的页面的数据，这些数据会影响popup.html。一个简单的示例将遵循以下步骤：打开标签到google.comClick扩展图标以打开弹出窗口，背景为蓝色。将备注保存到localStorage中，该弹出窗口已经打开。关闭弹出窗口。再次打开弹出窗口，由于localStorage设置，背景为绿色。打开yah

浏览 0提问于2012-06-27得票数 0

回答已采纳

1回答

从弹出窗口捕获twitter登录

javascript、google-chrome、twitter、popup、google-chrome-extension

我正在为google chrome开发一个扩展。我打开了一个小弹出窗口，希望在其中提供服务，但如果用户没有登录twitter，他必须单击一个按钮，其中将打开一个新窗口，其中包含api.twitter.com/oauth/authenticate url在他登录到twitter后，api.twitter.com将重定向到另一个页面，然后它必须自动关闭，紧接着我想刷新我的弹出窗口，以便我的服务将被打开

浏览 0提问于2011-08-08得票数 0

1回答

Chrome扩展将脚本插入到带有空白URL的弹出窗口中

google-chrome-extension、popup

我正在构建一个具有*://*/*权限的通用扩展，因为用户需要能够配置要在哪些站点上运行。扩展将脚本注入到匹配的选项卡中，但是对于某些popup选项卡，它失败了。这种行为的一个很好的例子是Google演示文稿。运行chrome.tabs.executeScript后，给出其中一个弹出选项卡(弹出窗口中的选项卡)，chrome.runtime.lastError声明：无法访问url "“的内容。

浏览 1提问于2014-06-11得票数 1

回答已采纳

2回答

在Google* Chrome中打开URL并调整窗口大小*

macos、google-chrome、command-line、macros、launching-application

我有几个Chrome窗口，缩小到我感兴趣的值，并且间隔开，这样所有的东西都能显示在屏幕上。我想写一个宏来启动所有(在这一点上8个站点)这些Chrome/浏览器窗口，并相应地将它们隔开。

浏览 0提问于2012-11-13得票数 0

回答已采纳

1回答

是否将项目添加到Win32窗体应用程序中的标题栏？

c#、visual-studio-2010

如何在Visual Studio 2010中将工具箱中的项添加到窗口的标题栏中？我当前正在使用C# Win32窗体应用程序。我想要的一个主要例子是Google Chrome，以及它的标签是如何集成到标题栏中的。我如何在Visual Studio中做到这一点？

浏览 1提问于2012-07-21得票数 0

2回答

使用弹出式chrome* extention中的当前选项卡*

google-chrome、google-chrome-extension

我正在尝试做一个扩展，可以从Google chrome上当前打开的标签页中收集一些数据。如果我只能访问当前打开选项卡的javascript "window“对象，那就足够了。但我愿意接受另一个建议。有人能帮上忙吗？

浏览 0提问于2012-01-05得票数 0

1回答

onClick函数-自动从电子表格的静态字段复制数据

google-chrome、google-chrome-extension

我将非常高兴为扩展代码的一些想法提供帮助，当按下chrome中的图标时，自动从电子表格中的静态字段复制文本，如：我曾多次尝试使用onClick函数，但它对我不起作用。

浏览 0提问于2013-05-13得票数 0

1回答

在Chrome扩展中打开和关闭一个简单的弹出窗口

javascript、google-chrome、google-chrome-extension

我有一个Chrome扩展应该允许用户通过弹出窗口登录到谷歌，因为它不会显示在iframe中。我使用的是window.open()，它工作得很好，只是我无法在用户登录后关闭弹出窗口。我一直在尝试使用chrome.windows.create而不是window.open，但没有成功，希望一旦我通过网址检测到他们已经成功登录，我就能够关闭弹出窗口。在popup_google.js中，我有一个简单的函数： function

浏览 0提问于2015-10-28得票数 1

1回答

如何创建像window.location一样的开发chrome扩展的Chrome标签？

jquery、google-chrome-extension、google-chrome-app

我正在开发一个chrome扩展。我有一个要求，就是创建一个新的标签与一些参数，如javascript的‘窗口’功能。默认的javascript窗口函数，我需要设置如下代码，然后window.location.replace允许在新窗口中访问页面的权限。gcRemotePort : remotePort, webSocketPort : 9099,}); 现在，我正在使用google<

浏览 0提问于2017-02-16得票数 0

1回答

调整窗口的Chrome扩展

javascript、google-chrome、google-chrome-extension、window

我试图做一个疯狂的简单的Chrome扩展。我所需要的是以下内容:单击"browser_action“工具栏图标时，可以执行以下操作之一(两者都可以)： chrome.browserAction.onClicked.addListen

浏览 3提问于2013-02-05得票数 2

回答已采纳

1回答

如何从chrome扩展中读取文件？

javascript、google-chrome、google-chrome-extension

我有一个popup.html，当通过点击浏览器操作加载弹出窗口时，会调用popup.js。在这里，我以编程方式使用chrome.tabs.executeScript()注入内容脚本。如何在扩展中插入来自不同.html文件的代码，因为这样维护代码要容易得多。我在考虑在popup.js中访问它(有什么应用程序接口调用吗？)然后在code属性中插入内容脚本代码和检索到的HTML码的字符串。我看到了一些使用content script中的XMLHttpReq

浏览 4提问于2015-03-04得票数 23

回答已采纳

1回答

chrome扩展在浏览器操作弹出窗口中获取活动标签id

google-chrome-extension

我正在写一个扩展，它可以通过后台页面捕获任何类型的重定向，跟踪每个选项卡的重定向，并在每个选项卡的浏览器操作中概述它们。因此，我希望动作弹出脚本获得活动选项卡的Id，以便在动作弹出中仅显示与此活动选项卡相关的数据。我已经在清单中声明了权限"activeTab“。在注意到文档中提到浏览器操作是未定义tab的上下文的实例之前，我尝试了chrome.tabs.getCurrent(function(tab){})。我考虑通过消息传递内容脚本来获取标签id，但是我没有找到一种合适的方

浏览 0提问于2016-10-04得票数 6

回答已采纳

3回答

如何在chrome中获得书签图标？

javascript、google-chrome、google-chrome-extension

当我使用：在我的extension.It中得到了wrong.It警告的东西我怎么才能修复它？

浏览 31提问于2012-04-25得票数 6

5回答

Google Chrome首先加载javascript，即使我将script标记放在body标记的末尾

javascript、html、google-chrome

Google Chrome首先显示警告框，然后当我单击“确定”时，内容就会加载。<!

浏览 10提问于2017-08-04得票数 2

7回答

如何指定网页的语言，使Google* Chrome不提供翻译*

browser、internationalization、cross-browser、google-chrome、translation

我有一个页面，Google Chrome坚持认为是法语的。

浏览 0提问于2010-06-05得票数 53

1回答

如何在createTextNode中使用innerHTML？

javascript、html、dom

我正在尝试创建一个chrome扩展，我通过使用XMLHttpRequest解析RSS提要，然后将解析后的令牌(如title & description )存储到一个数组中来实现此目的。在解析提要并将标记存储到一个数组中之后，我遍历该数组，并使用DOM将它们显示在chrome扩展弹出窗口上。它可以工作，但问题是每个description都有超文本标记语言标签，并显示如下所示： <p><img

浏览 0提问于2011-11-07得票数 3

回答已采纳

2回答

如何使用机器人框架脚本从本地机器上传csv文件？

automated-testing、selenium2、robotframework、csv-file

这是我的测试方案-是否有任何选项选择窗口弹出菜单使用关键字Select Window或任何其他选项？请帮我解决这个问题！注意-我使用的是Selenium2Library

浏览 0提问于2015-10-09得票数 2

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在chrome扩展中将google标签管理器插入到弹出窗口？

相关·内容

如何在chrome扩展中进行A/B测试

如何在chrome扩展中将google标签管理器插入到弹出窗口？

如何编写一个以"window.open()“打开的窗口为目标的Chrome扩展？

在Chrome扩展的弹出窗口中保留页面特有的数据？

从弹出窗口捕获twitter登录

Chrome扩展将脚本插入到带有空白URL的弹出窗口中

在Google* Chrome中打开URL并调整窗口大小*

是否将项目添加到Win32窗体应用程序中的标题栏？

使用弹出式chrome* extention中的当前选项卡*

onClick函数-自动从电子表格的静态字段复制数据

在Chrome扩展中打开和关闭一个简单的弹出窗口

如何创建像window.location一样的开发chrome扩展的Chrome标签？

调整窗口的Chrome扩展

如何从chrome扩展中读取文件？

chrome扩展在浏览器操作弹出窗口中获取活动标签id

如何在chrome中获得书签图标？

Google Chrome首先加载javascript，即使我将script标记放在body标记的末尾

如何指定网页的语言，使Google* Chrome不提供翻译*

如何在createTextNode中使用innerHTML？

如何使用机器人框架脚本从本地机器上传csv文件？

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐