构建 chrome 扩展时无法与页面的 DOM 交互答案

【问题标题】：Unable to interact with the DOM of the page while building a chrome extension构建 chrome 扩展时无法与页面的 DOM 交互
【发布时间】：2015-05-17 02:41:20
【问题描述】：

伙计们，我正在尝试创建这样的东西。 https://www.uploady.com/#!/download/3FQNqMKaxCu/WnMhnfYaXKXRSTVv 或者你可以想象一个“Pin it”类型的按钮，如果有任何文本被突出显示。

如果我的问题看起来很小，我很抱歉，但我刚刚开始编程。

我无法使内容脚本中的代码正常工作。有人能指出我可能出错的地方吗？

这是我要执行的代码。 我想在我选择任何文本时在任何网页上启动一个警告框。稍后我会将它替换为图像中的实际按钮。这是代码

myscript.js

    function getSelectedText()
    {
        var txt = '';
         if (window.getSelection)
        {
            txt = window.getSelection();
                 }
        else if (document.getSelection)
        {
            txt = document.getSelection();
                }
        else(document.selection)
        {
            txt = document.selection.createRange().text;
                }
    return txt;

    }


      $('window').mouseup(function() {
        var text=getSelectedText();
        if (text!='') alert(text);

    });

这是我的 manifest.json 文件

// JavaScript Document

    {    
        "manifest_version": 2,
        "name":"knowledge maps extension",
        "version":"1.0",
        "description":"",
        "browser_action":{ 
        "default_icon":"logo1.png",
        "default_popup": "popup.html"
                },

        "background":{
        "scripts":["background.js"],

       "persistent": false},


        "permissions": [ "tabs","http://*/*", "https://*/*" , "contextMenus"],

         "web_accessible_resources": [ "jquery-1.10.1.min.map", "frame.html" ],
     "homepage_url": "http://localhost/trial/Untitled-1.php",

     "content_scripts": [ {
      "js": [ "jquery-1.10.1.min.js","myscript.js"],      
      "css": ["mystyles.css"],

      "matches": [ "http://*/*", "https://*/*" ],
      "run_at": "document_start"
   } ]

   }

如果我的方向正确，有人可以指出。我想如果我可以让警报消失，我可以通过使用 jquery 添加一个按钮来轻松替换它。我想保持我的代码简单，所以我一次解决问题

【问题讨论】：

您是否尝试在控制台中查找错误？
为什么在文档开始时运行？这可能会导致问题，请将其删除
我不知道如何找到控制台，但我会开始研究它。你觉得代码正确吗
@pavneettiwana 看看Dev Tools overview 和这个小extension debugging tutorial。
@ZigMandel 我尝试这样做它不起作用。我认为要么我的权限不正确，要么我需要从其他文件执行 myscript.js。我希望每次我选择一些文本时它都会启动一个弹出窗口。我已经对代码进行了更改以向您展示

标签： jquery dom google-chrome-extension

【解决方案1】：

您不应该将代码包装在 <script> 标签中：Chrome 需要一个 JS 源文件，而不是 HTML sn-p。

请调试您的代码：查看控制台和开发工具。

【讨论】：

Xan 感谢您的输入，我检查了控制台它说语法错误，未捕获的类型错误：无法读取 null 的属性“样式”
@pavneettiwana 因为你的代码不处理样式，所以它必须来自 jQuery； Zig Mandel 是正确的，在document_start 运行可能会出现问题。
感谢您的帮助，第一个问题解决了，知道下一个。控制台真的很有帮助。