在chrome_extension

时间：2018-06-19 17:09:42

标签： javascript google-chrome-extension

我是新的chrome扩展人员。我正在构建一个扩展，它将执行以下两项操作之一：

  1. 在当前选项卡中进行选择（无论用户突出显示了什么），然后将其复制到popup.hmtl中的“源”文本字段中，以便用户随后可以选择一种语言并进行翻译（使用Google翻译）。 / li>
  2. 如果当前活动的选项卡具有文本字段的给定ID，请将THAT字段的内容复制到popup.html中的“源”文本字段中（以便用户随后进行翻译等）

我可以使＃1正常工作，但是当我尝试在代码中构建＃2时，即使我知道存在此ID的事实，它也总是返回null。

我不确定什么地方出了问题，而且我真的不确定如何进行这项工作。下面的工作代码（实际上只有三个文件-manifest.json，popup.html和popup_script.js）

manifest.json 

{
"manifest_version" : 2,
"name" : "CSOne Translation Prototype",
"description" : "Extension to translate CSOne comments and email to 
customer",
"version" : "1.0",
"permissions": ["activeTab", "tabs", "storage", "<all_urls>"],
"browser_action" : {
"default_title" : "Clock",
"default_icon" : "icon.png",
"default_popup" : "popup.html"
},

"icons" : {
"16": "icon16.png",
"48" : "icon48.png",
"128" : "icon128.png"
}

}

popup_script.js（为安全起见删除了API密钥）

chrome.tabs.executeScript( {
code: "window.getSelection().toString();"
}, 

function selectTxt(selection) {
console.log(selection[0]);
document.getElementById("txtSource").value = selection[0];
});


$("#btnTranslate").click(function () {
var url = "https://translation.googleapis.com/language/translate/v2? 
key=<GOOGLEAPIKEY>;
        url += "&source=" + $("#ddlSource").val();
        url += "&target=" + $("#ddlTarget").val();
        url += "&q=" + escape($("#txtSource").val());
        $.get(url, function (data, status) {
            $("#txtTarget").val(data.data.translations[0].translatedText);
        });
    });

和popup.html 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            Source Language
        </td>
        <td>
            <select id="ddlSource">
                <option value="ZH">Chinese (Mandarin)</option>
                <option value="CS">Czech</option>
                <option value="DA">Danish</option>
                <option value="NL">Dutch</option>
                <option value="EN" selected = "selected">English</option>
                <option value="ET">Estonian</option>
                <option value="FR">French</option>
                <option value="KA">Georgian</option>
                <option value="DE">German</option>
                <option value="HI">Hindi</option>
                <option value="HU">Hungarian</option>
                <option value="LA">Latin</option>
                <option value="LV">Latvian</option>
                <option value="LT">Lithuanian</option>
                <option value="SR">Serbian</option>
                <option value="CY">Welsh</option>
                <option value="XH">Xhosa</option>
            </select>
        </td>
        <td>
        </td>
        <td>
            Target Language
        </td>
        <td>
            <select id="ddlTarget">
                <option value="ZH">Chinese (Mandarin)</option>
                <option value="CS">Czech</option>
                <option value="DA">Danish</option>
                <option value="NL">Dutch</option>
                <option value="EN">English</option>
                <option value="ET">Estonian</option>
                <option value="FR" selected = "selected">French</option>
                <option value="KA">Georgian</option>
                <option value="DE">German</option>
                <option value="HI">Hindi</option>
                <option value="HU">Hungarian</option>
                <option value="LA">Latin</option>
                <option value="LV">Latvian</option>
                <option value="LT">Lithuanian</option>
                <option value="SR">Serbian</option>
                <option value="CY">Welsh</option>
                <option value="XH">Xhosa</option>
            </select>
        </td>
        <td>
            <input type="button" id="btnTranslate" value="Translate" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <textarea id="txtSource" rows="10" cols="30"></textarea>
        </td>
        <td>
        </td>
        <td colspan="2">
            <textarea id="txtTarget" rows="10" cols="30"></textarea>
        </td>
        <td>
        </td>
    </tr>
</table>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="popup_script.js"></script>
</body>
</html>

同样，我知道源页面上有一个带有给定ID的文本框（请参见下面的HTML代码段）：

我要从中获取信息的页面中的

摘录

<textarea id="j_id0:j_id443:quickEdit:frmQuickEdit:NoteText" 
name="j_id0:j_id443:quickEdit:frmQuickEdit:NoteText" class="con-MonoSpace 
qedit-NoteArea" title="Note" style="height: 157.406px;"></textarea>

因此，我试图更改我的popup_script.js使其包含以下代码：

'update'popup_script.js（请注意，在下面的document.getElementById部分中，我必须将实际ID更改为才能正确设置此帖子中的格式-在实际代码中，其硬编码为“ j_id0：j_id443：quickEdit：frmQuickEdit：NoteText“ 

var csoneCommentID = document.getElementById("<IDABOVE>").value;
function selectTxt(selection) {
console.log(selection[0]);
document.getElementById("txtSource").value = selection[0];

if (csoneCommentID == "null")
{
    alert("CSOne Note Field is empty, copying selection for translation");
    document.getElementById("txtSource").value = selection[0];
}
else if
(document.getElementById("<IDABOVE>").value != "null")
    {
    alert("CSOne Note field contains text - copying for translation");
    document.getElementById("txtSource").value =
document.getElementById("<IDABOVE>").value;
    }

  });

现在，如果我尝试使用“更新的” popup_script.js，我总是会收到以下错误：

未捕获的TypeError：无法在第一行读取null的属性“值”：

未捕获到的TypeError：

var csoneCommentID = document.getElementById("<IDABOVE>").value;

所以...我真的不确定如何获取该文本区域中存在的值以发送给扩展程序。明确地说，我希望即使在“开始”页面（用户在单击扩展操作按钮之前位于该页面上）的表单中提交数据之前，也可以发送该数据。另外，当用户位于此起始页上时，选择部分（此文章顶部的选项1）也不起作用，但是该选项在其他页面上也起作用（我可以在stackoverflow上选择文本，例如，单击扩展名，它将其粘贴到扩展名的源翻译字段中-如果我使用未经修改的popup_script.js）。

任何帮助将不胜感激，我是新来的，所以请客气... :)

非常感谢您！

编辑-

按照以下建议，我添加了一个content.js脚本，该脚本会产生类似的失败，但我根本不理解为什么：

content.js 

var extensionID = "efkednjacmmjkkdndkbkmglmenkepgkg";
var csoneElementID = "j_id0:j_id443:quickEdit:frmQuickEdit:NoteText";
var greeting = "Starting Content Script";
var message = "Content Script running";
function responseCallback(responseObject){
console.log("Message '" + responseObject.message + "' from Sender '" + 
responseObject.sender + "'");
}
console.log(greeting);
document.addEventListener("DOMContentLoaded",function(dcle){
var elementID = document.getElementById(csoneElementID);
elementID.addEventListener("select",function(ce){
    chrome.runtime.sendMessage(extensionID,message,responseCallback);
    });
});

这将产生“未捕获的TypeError：无法读取null的属性'addEventListener'     在HTMLDocument。 （content.js：11）“

第11行是'elementID.addEventListener（“ select”，function（ce）'

我认为内容脚本背后的想法是允许它查看基础/调用html页面？那么，为什么它返回null？我无法弄清我所缺少的东西（我在那里也尝试过各种类型的DOM事件，但无济于事）...我觉得答案就在我的面前...

另一个编辑-

在浏览Chrome开发人员工具的源页面时（我正在寻找带有疯狂的长文本区域ID的代码，我希望从中复制内容），我看到了content.js'console.log（greeting）'的一部分正在触发（我在其中看到控制台消息，上面写着“正在启动内容脚本”，如果我关闭扩展名并重新加载，该消息就会消失-因此我知道它不是来自其他扩展名/等）-所以，我知道content.js页面正在该页面上运行，但是似乎没有向我的popup_script.js发送任何实际内容。所以我添加了'console.log（“ csoneElementID ='” + csoneElementID +“'”）;'在“ var elementID”部分记录其正在收集的内容之后，它返回“ csoneElementID =”“ ...我无法弄清楚这一点，感觉就像我在树林中迷失了树木... < / p>

谢谢

0 个答案:

没有答案
相关问题
最新问题