个人中心
gpt4 book ai didi

google-chrome - Chrome 扩展程序 : get source code of active tab

转载 作者：行者123 更新时间：2023-12-03 23:14:06 27 4
gpt4 key购买 nike

关闭。这个问题需要details or clarity .它目前不接受答案。












想改善这个问题吗？通过 editing this post 添加详细信息并澄清问题.

4年前关闭。




Improve this question




单击 chrome 扩展图标时，我需要获取当前选项卡的源代码。我也试过按钮点击事件。请查看我当前的代码:

list 文件.json

    {  "name": "UM Chrome Extension!",  "version": "1.0",
  "description": "To ensure the tracking codes present.",
    "icons": {
"128": "TW-Extension-Icon2.png"
},   "background": {
      "scripts": [ "background.js"]
   }, 
  "content_scripts": [
    {
      "matches": ["http://*/*"],  
      "js": ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"]
    }
    ], 
    "permissions": [
    "activeTab","tabs","contextMenus", "http://*/*"
  ],

  "browser_action": {
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

弹出窗口.html 
<!doctype html>
<html class="no-js" lang="">
    <head>
        <script type="text/javascript" src="popup1.js"></script>
    </head>

    <body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>

和 popup.js 
window.addEventListener('DOMContentLoaded', function() {
var fbshare = document.querySelector('#check-1');
    fbshare.addEventListener('click', function() {
        var htmlCode = document.documentElement.outerHTML;
     window.alert(htmlCode);
      });

});

如何获取事件标签的源代码？我需要获取页面的源代码，以便我需要搜索页面是否包含特定的跟踪代码(如 GA 代码)。

谢谢你

最佳答案

您的 list 同时包含 "content_scripts" (在 document_idle 上的页面上下文中运行)和 "browser_action"脚本(单击扩展菜单按钮时在独立上下文中运行)。

在 popup.html您引用 popup.js ，所以在 popup.js当您调用 document.documentElement.outerHTML您正在获取 popup.html 的内容，不是事件选项卡。

您引用了 popup.js和 popup1.js ，这令人困惑。您当前在弹出窗口和页面上下文中运行相同的代码，这几乎可以保证会中断其中之一。按照惯例使用 content.js在 "content_scripts"和引用popup.js在行动popup.html .
"content_scripts"在每个页面中运行，无论用户是否点击扩展。您当前的 list 正在添加 ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"]到每一页，这是不必要的缓慢。

避免在 Chrome 扩展中使用 jQuery。它相当大，当您完全确定所有用户都在 Chrome 上时，浏览器标准化库不会增加太多。如果没有它你就不能编码，那么试着把它限制在你的弹出窗口中或动态加载它。

您设置了 "scripts": [ "background.js"] ，它在后台不断运行，在您当前的代码中根本不需要。如果您需要在操作按钮之外执行操作，请考虑使用 event pages反而。

使用 Chrome API 从弹出窗口的上下文中获取页面。您需要query chrome.tabs 获取事件选项卡，然后调用 chrome.tabs.executeScript 在该选项卡的上下文中执行脚本。

Google 的 API 使用回调，但在本例中我将使用 chrome-extension-async 允许使用 promise (还有其他库也这样做)。

在 popup.html (假设您使用 bower install chrome-extension-async ):

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="bower_components/chrome-extension-async/chrome-extension-async.js"></script>
    <script type="text/javascript" src="popup.js"></script>
</head>

<body style="width: 600px; height: 300px;">
    <button value="Test" id="check-1"> </button>
</body>
</html>

在 popup.js (丢弃 popup1.js): 
function scrapeThePage() {
    // Keep this function isolated - it can only call methods you set up in content scripts
    var htmlCode = document.documentElement.outerHTML;
    return htmlCode;
}

document.addEventListener('DOMContentLoaded', () => {
    // Hook up #check-1 button in popup.html
    const fbshare = document.querySelector('#check-1');
    fbshare.addEventListener('click', async () => {
        // Get the active tab
        const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
        const tab = tabs[0];

        // We have to convert the function to a string
        const scriptToExec = `(${scrapeThePage})()`;

        // Run the script in the context of the tab
        const scraped = await chrome.tabs.executeScript(tab.id, { code: scriptToExec });

        // Result will be an array of values from the execution
        // For testing this will be the same as the console output if you ran scriptToExec in the console
        alert(scraped[0]);
    });
});

如果你这样做，你就不需要任何 "content_scripts"在 manifest.json .您也不需要 jQuery 或 jQuery UI 或 Bootstrap。

关于google-chrome - Chrome 扩展程序 : get source code of active tab，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43511001/

27 4 0
文章推荐： apache-spark - pyspark to_timestamp 不包括毫秒
文章推荐： asp.net-core - 如果我想要一个单独的 Web api，但仍然在服务器端运行，然后在客户端运行，应该选择哪个项目模板？
文章推荐： gcloud - Google Vision API - 项目未通过
文章推荐： azure-devops - Azure DevOps 管道在构建之间获取工作项
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com