个人中心
gpt4 book ai didi

javascript - 如何使用谷歌浏览器扩展搜索亚马逊？

转载 作者：太空宇宙 更新时间：2023-11-04 16:00:19 25 4
gpt4 key购买 nike

我想要一个 google chrome 扩展程序，它可以提供用户的单词并在亚马逊网站上搜索它，并在单个 HTML 页面上向用户显示搜索结果。

我用 JavaScript 和 DOM 尝试了一下，这是我的代码:

manifest.json:

 {
  "manifest_version": 2,

  "name": "Amazon Search",
  "description": "This extension to sarch from Amazon.com",
  "version": "0.1",

  "browser_action": {
    "default_icon": "amazon.png",
    "default_popup": "form.html"
  },
  "background":
  {
    "scripts": ["search.js"]
  },
  "permissions": [
    "activeTab",
    "tabs",
    "https://ajax.googleapis.com/",
    "https://amazon.com/"
  ]
}

表单.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Form</title>
    <script src="search.js"></script>
</head>
<body>
    <form>
        <label>Search : </label><input type="text" id="search" />

        <button id="gotoamazon" >Search Amazon</button>

    </form>

</body>
</html>

搜索.js:

var searchItem = document.getElementById('search').value;
    console.log(searchItem);

    function amazon(){
        window.open('https://amazon.com','_blank');
        document.getElementById('twotabsearchtextbox').value = searchItem;
        document.getElementById('nav-search-submit-text').click();
        var results = document.getElementById('resultsCol').value;
    };

    document.getElementById('gotoamazon').addEventListener('click', amazon);

我遇到一些问题，如何在另一个页面上显示搜索结果(结果变量)？

最佳答案

  1. 不要在不同页面中包含相同的 DOM 脚本，因为背景页面是不同的上下文。必读:extensions architecture .

  2. 右键单击扩展弹出窗口并选择“检查”以打开弹出窗口的开发工具:您将在“控制台”选项卡中看到错误:<script src="search.js"></script>同步执行脚本，这意味着正文中还没有任何内容，因此您的代码将无法获取该元素。使用 DOMContentLoaded 事件或将脚本标记移到结束 </body> 之前标签。

  3. 不需要亚马逊的许可，因为您不尝试直接访问它。
    不需要后台页面脚本。

无需脚本即可解决此任务:

  1. 无需手动打开窗口，只需使用提交到 _blank 的表单即可以及亚马逊的搜索 URL，您可以从网站上的实际搜索结果页面复制该 URL(可以选择删除跟踪/辅助参数):https://www.amazon.com/s/?field-keywords=derp

  2. 使用<button type="submit">

  3. 使用type="search"在input提供历史自动完成和 x清除字段的按钮。

  4. 输入 input里面label - 因此您也可以单击标签来聚焦输入。

<html>
<head>
    <title>Form</title>
</head>
<body>
    <form target="_blank" action="https://www.amazon.com/s/">
        <label>Search :
            <input type="search" name="field-keywords">
        </label>
        <button type="submit">Search Amazon</button>
    </form>
</body>
</html>

这将打开一个带有亚马逊搜索的新前台选项卡。如果您想要背景选项卡，则需要脚本，并且应该使用 chrome.tabs.create ({url: newUrl, active: false})

关于javascript - 如何使用谷歌浏览器扩展搜索亚马逊？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42328457/

25 4 0
文章推荐： html - 更改表格中的字体颜色
文章推荐： 表格单元格的 JQuery 交换颜色
文章推荐： c++ - 在哪里定义内部结构静态对象？好像不能
文章推荐： css - 为输入范围的一部分着色
太空宇宙
个人简介

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

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