0

我正在尝试使用下面的代码来制作一个简单的 chrome 扩展、输入文本和一个按钮，并且在单击按钮时，我想提取一个特定的 URL。我在编写代码时遇到问题。我对 JavaScript 相当陌生。

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

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

 </head>
 <body>
    <input type="text" name="enter" class="enter" value="67" id="lolz" />
    <button type="button" id="the_button">LookUp Site ID</button>
    <script src="popup.js"></script>
</body>
</html>

popup.js - 更新

var VanillaRunOnDomReady = function() {
 document.getElementById('the_button').addEventListener('click', myFunction);
   function myFunction() { 
var siteid = document.getElementById('lolz').value 
  //window.location = "https://www.websiteimusing.com/siteid" + siteid;
  chrome.tabs.create({ url: "https://www.websiteimusing.com/siteid" + siteid}); 
  }
 }

}

清单.json

{
   "manifest_version": 2,

   "name": "ID URL opener",
   "description": "Enter ID and it will pull up the correct URL",
   "version": "1.0",

   "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html"
   },
 "permissions": ["tabs"]
}

当前错误 - 更新

它没有填充错误，只是在单击按钮时从未实际加载 URL，有什么想法吗？

4

1 回答 1

6

好的，实际上实现起来非常简单。你只需要添加一个 background.js 文件。

这是扩展的流程：

  1. popup.js 接收输入文本
  2. popup.js 引发一个事件请求一个新的选项卡请求
  3. background.js 监听事件并从请求中获取数据
  4. background.js 然后创建一个新标签，其中 src 作为 url+input

你完成了，你愿意让我写这段代码吗？

编辑：代码

最好的部分是，现在您不需要根据最新的 chrome 扩展文档将消息传递给 background.js，可以从弹出窗口访问选项卡权限。以下代码将在弹出窗口中获取输入字符串，并将在新选项卡中发送用户，在该选项卡中在谷歌上搜索输入字符串。大部分代码都是不言自明的，让我知道如果你不能解决它，我会把 crx + 源发给你

清单.json：

{
    "name"          : "Simple Search",
    "version"       : "0.1",
    "manifest_version"  : 2,
    "description"       : "Simple Search Plugin",
    "browser_action": {
      "default_icon": {
      "19": "images/icon_48.png"
    },
    "default_title": "Simple Search",
    "default_popup": "popup.html"
  },
    "permissions"       :
        [
            "tabs"
        ],
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

popup.html

<html>
  <head>
    <style>
            body{
                font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body style="width:300px;">
    <center>
      <h1>Simple Search</h1>
      <input type="text" id="q"></input>
      <input type="button" id="s" value="search">
    </center>
  </body>
</html>

popup.js

$(function() {
  $('#s').click(function() {
     var url  = "https://www.google.com/search?q=" + $('#q').val();
     chrome.tabs.create({url: url});
  });
});

document.addEventListener('DOMContentLoaded');
于 2013-07-17T04:23:04.103 回答