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

【问题标题】：How to search amazon with google chrome extension?如何使用谷歌浏览器扩展搜索亚马逊？
【发布时间】：2017-02-19 14:31:31
【问题描述】：

我想要一个 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/"
  ]
}

form.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>

search.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);

我有一些麻烦，如何在另一个页面上显示搜索结果（结果变量）？

【问题讨论】：

标签： javascript dom google-chrome-extension amazon

【解决方案1】：

不要在不同的页面中包含相同的 DOM 脚本，因为背景页面是不同的上下文。必读：extensions architecture。
右键单击扩展弹出窗口并选择检查以打开弹出窗口的开发工具：您将在控制台选项卡中看到错误：<script src="search.js"></script> 同步执行脚本，这意味着正文中还没有任何内容，因此您的代码将失败获取元素。要么使用 DOMContentLoaded 事件，要么将 script 标签移到结束 </body> 标签之前。
不需要亚马逊的权限，因为您不是直接尝试访问它。
不需要后台页面脚本。

这个任务可以在没有脚本的情况下解决：

无需手动打开窗口，只需使用提交到_blank 的表单和亚马逊的搜索 URL，您可以从网站上的实际搜索结果页面复制（可选择删除跟踪/辅助参数）：https://www.amazon.com/s/?field-keywords=derp
使用<button type="submit">
在input 中使用type="search" 来提供历史记录自动完成功能和用于清除字段的x 按钮。
将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})

【讨论】：