將表單值發送到Chrome擴展

我是鉻擴展開發的新手，我創建了一個擴展chrome，它根據用戶給出的表單數據檢索一些數據。但是，我不知道如何動態地將表單值發送給chromes擴展。以下是我正在使用的代碼。 的manifest.json將表單值發送到Chrome擴展

{ 
"manifest_version": 2, 
"name": "Bookmark Extension Example", 
"description": "POST details of the current page to a remote endpoint.", 
"version": "0.2", 
"background": { 
    "scripts": ["event.js"], 
    "persistent": false 
}, 
"browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
}, 
"permissions": [ 
    "tabs", 
    "http://*/*", 
    "https://*/*" 
] 
}

popup.html

<body> 
    <form id="addbookmark"> 
     <p><label for="title">Title</label><br /> 
     <input type="text" id="title" name="title" size="50" value="" /></p> 
     <p><label for="url">Url</label><br /> 
     <input type="text" id="url" name="url" size="50" value="" /></p> 
     <p><label for="summary">Summary</label><br /> 
     <textarea id="summary" name="summary" rows="6" cols="35"></textarea></p> 
     <p><label for="tags">Json Name</label><br /> 
     <input type="text" id="jsonName" name="jsonName" size="50" value="document.title" /></p> 
     <p> 
      <input id="submitJson" type="submit" value="Send JSON Object/Value" /> 
      <!-- <span id="status-display"></span> --> 
     </p> 
    </form> 
</body>

content.js

chrome.runtime.sendMessage({ 
'title': document.title, 
'url': window.location.href, 
'summary': window.location.href 
});

event.js

個

function getPageDetails(callback) { 

chrome.tabs.executeScript(null, { file: 'content.js' }); 

chrome.runtime.onMessage.addListener(function(message) { 

    callback(message); 
}); 
};

popup.js

function onPageDetailsReceived(pageDetails) { 
document.getElementById('title').value = pageDetails.title; 
document.getElementById('url').value = pageDetails.url; 
document.getElementById('summary').value = pageDetails.summary; 
} 



window.addEventListener('load', function(evt) { 

chrome.runtime.getBackgroundPage(function(eventPage) { 

    eventPage.getPageDetails(onPageDetailsReceived); 

}); 
});

任何一個可以建議我如何動態地發送文本jsonName值序得到的文檔的動態數據作爲警告。例如，如果用戶在jsonName中輸入window.location.href，它應該返回輸入字段的值作爲警報。

來源

2015-08-22 Srinivas B

一個小問題，我們開始之前，確保包括彈出JS在你的HTML，像這樣：

popup.html

<body> 
    <form id="addbookmark"> 
     <p><label for="title">Title</label><br /> 
     <input type="text" id="title" name="title" size="50" value="" /></p> 
     <p><label for="url">Url</label><br /> 
     <input type="text" id="url" name="url" size="50" value="" /></p> 
     <p><label for="summary">Summary</label><br /> 
     <textarea id="summary" name="summary" rows="6" cols="35"></textarea></p> 
     <p><label for="tags">Json Name</label><br /> 
     <input type="text" id="jsonName" name="jsonName" size="50" value="document.title" /></p> 
     <p> 
      <input id="submitJson" type="submit" value="Send JSON Object/Value" /> 
      <!-- <span id="status-display"></span> --> 
     </p> 
    </form> 
    <script src="popup.js"></script> 
</body>

其次，由於content.js執行時，在頁面上您的瀏覽器操作將打開，您可以添加其他代碼以打開Port回到彈出頁面和彈出窗口可以通信的彈出窗口。 connect和onConnect是這裏的相關方法。就像這樣：

content.js

chrome.runtime.sendMessage({ 
    'title': document.title, 
    'url': window.location.href, 
    'summary': window.location.href 
}); 

// Create port. 
var port = chrome.runtime.connect({ 
    name: "page" 
}); 

// Listen for messages. 
port.onMessage.addListener(function (message) { 
    if (message.name === "query") { 
    var objectPath = message.query; 
    var parts = objectPath.split('.'); 
    var obj = window; 
    var error = false; 
    // Get value. 
    for (var i = 0; i < parts.length; i++) { 
     var part = parts[i]; 
     // Check if in current object or prototype chain. 
     if (part in obj) { 
     obj = obj[part]; 
     } else { 
     error = true; 
     break; 
     } 
    } 

    if (error) { 
     port.postMessage({ 
     name: "query_error", 
     query: objectPath, 
     reason: "window." + parts.slice(0, i + 1).join('.') 
     }); 
    } else { 
     port.postMessage({ 
     name: "query_response", 
     query: objectPath, 
     value: obj 
     }); 
    } 
    } 
});

該負責創建端口並偵聽從彈出的查詢服務。下一頁：

popup.js

function onPageDetailsReceived(pageDetails) { 
    document.getElementById('title').value = pageDetails.title; 
    document.getElementById('url').value = pageDetails.url; 
    document.getElementById('summary').value = pageDetails.summary; 
} 

// Listen for page to connect. 
chrome.runtime.onConnect.addListener(function (port) { 
    if (port.name === "page") { 
    console.log("Received page port"); 
    port.onMessage.addListener(function (message) { 
     if (message.name === "query_error") { 
     alert("Error retrieving " + message.query + "!\n" + message.reason + " was not found."); 
     } else if (message.name === "query_response") { 
     alert("Retrieved value for " + message.query + ": " + message.value); 
     } 
    }); 
    // Set button listener. 
    document.getElementById("submitJson").addEventListener("click", function (e) { 
     var value = document.getElementById("jsonName").value; 
     if (value !== "") { 
     port.postMessage({ 
      name: "query", 
      query: value 
     }); 
     } else { 
     alert("You must enter a value!"); 
     } 
    }); 
    } else { 
    console.warn("Received unknown port."); 
    } 
}); 

window.addEventListener('load', function(evt) { 
    chrome.runtime.getBackgroundPage(function(eventPage) { 
    eventPage.getPageDetails(onPageDetailsReceived); 
    }); 
});

它處理建立點擊監聽器，通過端口發送的查詢和處理響應。

有幾種方法可以改善上述情況，例如使用端口發送帶有初始頁面信息而不是sendMessage的消息，但是應該讓您知道如何繼續。另外請務必查看chrome.tabs中的現有API。如果你能以這種方式獲得你想要的信息（URL，標題等），它可以簡化事情！

來源

2015-08-22 16:55:27

將表單值發送到Chrome擴展

回答

相關問題