在建立Chrome扩展程序时无法与页面的DOM进行交互 [英] Unable to interact with the DOM of the page while building a chrome extension

问题描述

我正在尝试创建一些这样的东西。
https://www.uploady.com/#!/download/3FQNqMKaxCu / WnMhnfYaXKXRSTVv 或者你可以想象一下，如果任何文本被突出显示，那么这个按钮就会出现。

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

我无法使内容脚本中的代码工作。有一点可以指出我可能会出错。

这里是我要执行的代码。 我想在任何网页上启动一个提醒框，只要我选择任何文本。后来我会把它像图像中的实际按钮。这里是代码

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（）。 
} 
 return txt; 
 
} 
 
 
 $（'window'）。mouseup（function（）{
 var text = getSelectedText（）; 
 if （text！=''）alert（text）; 
 
}）; 
  

这是我的manifest.json文件

  // JavaScript文档
 
 {
manifest_version：2，
name：知识图扩展，
version：1.0，
description：，
browser_action：{
default_icon：logo1.png，
default_popup ：popup.html
}，
 
background：{
scripts：[background.js]，
 
持久性：false}，
 
 
权限：[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
}] 
 
} 
  

解决方案

你不应该用< script> 标签：Chrome希望有一个JS源文件，而不是HTML片段。

请调试代码：look在控制台和开发工具中一般。

Guys i am trying to create something like this. https://www.uploady.com/#!/download/3FQNqMKaxCu/WnMhnfYaXKXRSTVv Or you can imagine a "Pin it" kind of button incase if any text is highlighted.

I am sorry if my problem might seem small, but i have just started programming.

I am unable to make the code in my content scripts work. Can some one point out where I might be going wrong.

here is the code i am trying to execute. I want to launch a alert box on any webpage whenever i select any text. Later I will replace it the actual button like in the image. here is the code

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

    });

Here is my manifest.json file

// 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"
   } ]

   }

can someone point out if i am in the right direction. I think if i can have the alert to go off, i can easily replace it by adding a button using jquery. I want to keep my code simple so i am addressing on problem at a time

解决方案

You shouldn't wrap code in <script> tags: Chrome expects a JS source file, not an HTML snippet.

Please debug your code: look in the console and Dev Tools in general.

这篇关于在建立Chrome扩展程序时无法与页面的DOM进行交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！