简单的JavaScript Chrome扩展-打开一个URL-从输入文本修改

Simple JavaScript Chrome Extension - Opening a URL - modified from Input Text

本文关键字：一个 URL- 修改 文本 输入 Chrome JavaScript 扩展 简单      更新时间：2023-09-26

我正试图使用下面的代码来制作一个简单的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}); 
  }
 }

}

Manifest.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，有什么想法吗？

好吧，其实实现起来非常简单你只需要添加一个background.js文件

以下是扩展的流程：

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

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

编辑：代码

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

manifest.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');
相关文章：