来自父页面的Document.title? (Chrome扩展程序)

时间:2013-08-14 20:42:40

标签: javascript google-chrome-extension

我正在尝试为Google Chrome创建一个非常基本的JavaScript扩展程序。我想基本上从当前页面获取title / url / meta描述。我为此使用javascript document.*

在理论中它有效,但它没有做我想要的。加载到扩展程序中时,只会显示popup.html页面的信息,而不会显示用户当前页面的信息。

我该怎么做?

我发现了一些相关问题:Google Chrome extensions document.title not working。我想我需要添加某种chrome.*函数?

这是我的代码:


popup.js

var title = document.title;
if (title.length > 69) {
    var title = title.substring(0,69);
    var title = title+" <strong>...</strong>";  
}

var url = document.URL;

var desc = document.getElementsByName('description')[0].getAttribute('content');
if (desc.length > 156) {
    var desc = desc.substring(0,156);
    var desc = desc+" <strong>...</strong>";    
}

document.getElementById('link').innerHTML = title;
document.getElementById('url').innerHTML = url;
document.getElementById('meta').innerHTML = desc;

popup.html

<!doctype html>
<html>
  <head>
    <title>Preview</title>
    <meta name="description" content="Preview" />
    <style>
    body {
    background-color: #ffffff;
    margin:0px;
    padding:0px;
    font-family:arial,sans-serif;
    }

    #result { line-height: 1.2; width: 584px;}
    .r { margin:0px; padding:0px;}
    .r a { color:#2518b5; font-size:medium; font-weight:normal;}
    #url { color: #00802a; font-style: normal; }
    #meta { line-height:1.24; font-size: small; width:512px;}
    </style>
  </head>
  <body>
    <div id="result">
      <h3 class="r"><a href="" id="link">{title}</a></h3>
      <span id="url">{url}</span><br />
      <span class="st" id="meta">{meta}</span>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

的manifest.json

{
  "name": "Description here",
  "version": "1.0",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
      "default_title": "Preview",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "manifest_version": 2
}

1 个答案:

答案 0 :(得分:1)

为了与内容页面进行交互,您需要编写一个单独的脚本文件,并在清单中的content_scripts中注册它。

它可以通过传递消息与您的弹出窗口进行通信。

有关详细信息,请参阅documentation