在 Chrome 扩展程序默认弹出窗口中检索页面元标记的更快方法？

发布于 2025-01-10 21:57:49 字数 1920 浏览 0 评论 0 原文

我正在摆弄这个扩展，当单击图标时，它会从当前选项卡中检索标题、url 和元标记。数据显示在默认弹出窗口中，但是，由于使用 AJAX，元数据会延迟（一两秒）。有没有办法像使用 tabs.url 和 tabs.title 作为 url 和标题一样快速获取此信息？

这是 js 文件中的代码：

chrome.tabs.getSelected(null,function(tab) { // null defaults to current window
    var title = tab.title;
    var url = tab.url;

    document.getElementById("title").innerHTML = title;
    document.getElementById("url").innerHTML = url;


    var txt = "";
    // sample url used here, you can make it more dynamic as per your need.
    // used AJAX here to just hit the url & get the page source from those website. It's used here like the way CURL or file_get_contents (https://www.php.net/manual/en/function.file-get-contents.php) from PHP used to get the page source.
    $.ajax({
        url: url,
        error: function() {
            txt = "Unable to retrieve webpage source HTML";
        }, 
        success: function(response){
            // will get the output here in string format
            // used $.parseHTML to get DOM elements from the retrieved HTML string. Reference: https://api.jquery.com/jquery.parsehtml/
            response = $.parseHTML(response);
            $.each(response, function(i, el){
                if(el.nodeName.toString().toLowerCase() == 'meta' && $(el).attr("name") != null && typeof $(el).attr("name") != "undefined"){
                    txt += $(el).attr("name") +"="+ ($(el).attr("content")?$(el).attr("content"):($(el).attr("value")?$(el).attr("value"):"")) +"<br>";
                    console.log($(el).attr("name") ,"=", ($(el).attr("content")?$(el).attr("content"):($(el).attr("value")?$(el).attr("value"):"")), el);
                }
            });
        },
        complete: function(){
            document.getElementById("desc").innerHTML = txt;
        }
    });
      
  });

这不是重复的问题。与我的问题相关的建议文章是关于将 div 注入活动窗口的。我正在尝试从中检索数据并在默认弹出窗口中使用它。

原文

I am fiddling with this extension which retrieves the title, url, and meta tags from the current tab when the icon is clicked. The data is displayed in the default pop-up, however, the meta data is delayed (by a second or two) due to the use of AJAX. Is there a way to get this information as quickly as using tabs.url and tabs.title for the url and title?

Here is the code from the js file:

chrome.tabs.getSelected(null,function(tab) { // null defaults to current window
    var title = tab.title;
    var url = tab.url;

    document.getElementById("title").innerHTML = title;
    document.getElementById("url").innerHTML = url;


    var txt = "";
    // sample url used here, you can make it more dynamic as per your need.
    // used AJAX here to just hit the url & get the page source from those website. It's used here like the way CURL or file_get_contents (https://www.php.net/manual/en/function.file-get-contents.php) from PHP used to get the page source.
    $.ajax({
        url: url,
        error: function() {
            txt = "Unable to retrieve webpage source HTML";
        }, 
        success: function(response){
            // will get the output here in string format
            // used $.parseHTML to get DOM elements from the retrieved HTML string. Reference: https://api.jquery.com/jquery.parsehtml/
            response = $.parseHTML(response);
            $.each(response, function(i, el){
                if(el.nodeName.toString().toLowerCase() == 'meta' && $(el).attr("name") != null && typeof $(el).attr("name") != "undefined"){
                    txt += $(el).attr("name") +"="+ ($(el).attr("content")?$(el).attr("content"):($(el).attr("value")?$(el).attr("value"):"")) +"<br>";
                    console.log($(el).attr("name") ,"=", ($(el).attr("content")?$(el).attr("content"):($(el).attr("value")?$(el).attr("value"):"")), el);
                }
            });
        },
        complete: function(){
            document.getElementById("desc").innerHTML = txt;
        }
    });
      
  });

This is not a duplicate question. The suggested article that was linked to my question is in regards to inject a div onto the active window. I am trying to retrieve data from it and use it in the default-popup.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌逼全场 2025-01-17 21:57:49

只需使用标准 DOM API 和 JavaScript switch 查询 DOM 即可处理您感兴趣的不同可能属性。

// Gather all the <meta> elements into a node list and loop over them
document.querySelectorAll("meta").forEach(function(meta){
  // Test for specific values for the name attribute and act accordingly
  switch(meta.name.toLowerCase()){
    case "description":
      console.log("Description: " + meta.content);
      break;
    case "title":
      console.log("Title: " + meta.content);
      break;      
  }
});

<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="specifically descrpitive content about your page here">
  <meta name="title" content="some page title">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=yourfonthere" rel="stylesheet">
  <title>Page Title Here</title>
</head>
<body>
  <!-- begin page content -->
  <div id="pagewrap">
    <h1 class="header"> Welcome to HTML + CSS!</h1>
    <div id="flexwrapper">

      <div class="box1">
        <p>Box 01 content goes here! </p>
      </div>

      <div class="box2">
        <p>Box 02 content goes here! </p>
      </div>

      <div class="box3">
        <p>Box 03 content goes here! </p>
      </div>

    </div>
    <!--END FLEXWRAP-->
    <footer><span>Awwwwwww yeah<span></footer>
  </div><!--END PAGEWRAP-->
  
</body>
</html>

Just query the DOM using standard DOM API's and the JavaScript switch to handle the different possible attributes you're interested in.

// Gather all the <meta> elements into a node list and loop over them
document.querySelectorAll("meta").forEach(function(meta){
  // Test for specific values for the name attribute and act accordingly
  switch(meta.name.toLowerCase()){
    case "description":
      console.log("Description: " + meta.content);
      break;
    case "title":
      console.log("Title: " + meta.content);
      break;      
  }
});

<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="specifically descrpitive content about your page here">
  <meta name="title" content="some page title">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=yourfonthere" rel="stylesheet">
  <title>Page Title Here</title>
</head>
<body>
  <!-- begin page content -->
  <div id="pagewrap">
    <h1 class="header"> Welcome to HTML + CSS!</h1>
    <div id="flexwrapper">

      <div class="box1">
        <p>Box 01 content goes here! </p>
      </div>

      <div class="box2">
        <p>Box 02 content goes here! </p>
      </div>

      <div class="box3">
        <p>Box 03 content goes here! </p>
      </div>

    </div>
    <!--END FLEXWRAP-->
    <footer><span>Awwwwwww yeah<span></footer>
  </div><!--END PAGEWRAP-->
  
</body>
</html>

回复收藏 0 原文

~没有更多了~