Question

我正在尝试开发一个扩展程序，当用户点击右键菜单（上下文菜单）中的按钮时，该扩展程序将突出显示网页的选定文本。

有关所选文本的信息也是从用户那里获取的，因为我试图使用modalwindow使用编程注入，但我无法执行脚本。代码中没有显示错误。代码如下：

的manifest.json

{
  "manifest_version": 2,
  "name": "web highlighter",
  "description": "save the content of the selected text",
  "version": "1.0",

 "background": {
    "page" : "background.html"
    },
 "icons": {
      "16": "icon.png",
      "48": "icon.png"
   },

  "minimum_chrome_version": "6",
  "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
           "js": [
             "background.js", "content_scripts.js"
            ]
        }
    ],
    "web_accessible_resources": [

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


}

background.html

    <html>
<head>
        <script src = "background.js"></script>  
</head>
 <body>

</body>
</html>

background.js

function get_modal(info,tab)
  {
     chrome.tabs.executeScript(null, {file: "content_scripts.js"});

   }

chrome.contextMenus.create({title: "Highlight %s with capsule", contexts:["selection"], onclick: get_modal})

content_script.js

iframeElement = document.createElement("iframe");
iframeElement.setAttribute("style","width: 100%; height: 100%;");

wrapperDiv.appendChild(iframeElement);

modalDialogParentDiv = document.createElement("div");
modalDialogParentDiv.setAttribute("style","position: absolute; width: 350px; border: 1px solid rgb(51, 102, 153); padding: 10px; background-color: rgb(255, 255, 255); z-index: 2001; overflow: auto; text-align: center; top: 149px; left: 497px;");

modalDialogSiblingDiv = document.createElement("div");

modalDialogTextDiv = document.createElement("div"); 
modalDialogTextDiv.setAttribute("style" , "text-align:center");

modalDialogTextSpan = document.createElement("span"); 
modalDialogText = document.createElement("strong"); 
modalDialogText.innerHTML = "web highlighter";

breakElement = document.createElement("br"); 
imageElement = document.createElement("img"); 
imageElement.src = chrome.extension.getURL("spinner_progress.gif");

modalDialogTextSpan.appendChild(modalDialogText);
modalDialogTextDiv.appendChild(modalDialogTextSpan);
modalDialogTextDiv.appendChild(breakElement);
modalDialogTextDiv.appendChild(breakElement);
modalDialogTextDiv.appendChild(imageElement);

modalDialogSiblingDiv.appendChild(modalDialogTextDiv);
modalDialogParentDiv.appendChild(modalDialogSiblingDiv);

document.body.appendChild(wrapperDiv);
document.body.appendChild(modalDialogParentDiv);

如何通过单击contextmenus chrome扩展来使用编程注入来创建一个modalwindow

0 个答案: