Chrome擴展程序未使用網絡數據填充表單

Question

第一次使用chrome擴展程序-我正在做一個書簽擴展程序。 我希望content script在從網頁上抓取數據后將數據發送到我的后台彈出頁面。

我正在按照官方文檔進行消息傳遞 。 所以我有一個包含以下代碼的內容腳本background.js ：

var pageInfo = {
    'title': document.title,
    'url': window.location.href,
    'summary': window.getSelection().toString()
};

// Send the information back to the extension
chrome.runtime.sendMessage(pageInfo, function(response){
    console.log(response);
});

然后我的后台頁面腳本main.js像這樣攔截此消息：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    $('#title').val(request.title); // this is not working
    console.log('request: ', request);
    console.log('sender: ', sender);
    sendResponse('funky');
  }
);

現在，數據正在正確地來回傳遞。 上面的那些控制台語句起作用了！ 但是我的表單字段#title仍未填充。 我的背景頁面html（彈出式）表單是這樣的：

        <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">Tags</label><br />
            <input type="text" id="tags" name="tags" size="50" value="" /></p>
            <p>
                <input id="save" type="submit" value="Save Bookmark" />
                <span id="status-display"></span>
            </p>
        </form>

        <script src="jquery.min.js">
        </script>
        <script src="main.js"></script>

刷新網頁時，表單字段顯示為空

那我在做什么錯？ 如何調試和解決此問題？

這是我的manifest.json供參考

 {
  "name": "plugin name",
  "version": "0",
  "description": "What do I do as an extension",
  "background": {
    "scripts": ["jquery.min.js", "main.js"]
  },
  "manifest_version": 2,
  "browser_action": {
    "name": "Manipulate DOM",
    "icons": ["icon.png"],
    "default_icon": "icon.png",
    "default_popup": "background.html"
  },
  "permissions": [
    "tabs",
    "http://*/",
    "https://*/"
  ],
  "web_accessible_resources": ["jquery.min.map"],
  "content_scripts": [ {
    "js": [ "jquery.min.js", "background.js" ],
    "matches": [ "http://*/*", "https://*/*"]
  }]
}

Answer 1

請閱讀“ 架構概述”，並直接命名 。

命名內容腳本 background.js和彈出頁面 background.html極其混亂，我們可以從它實際上使您困惑的事實中看出來。

---

背景頁面是不可見的頁面，只要Chrome運行，它就會一直處於活動狀態。 它與彈出頁面不同，該彈出頁面是在您單擊瀏覽器操作時創建的，並在失去焦點時被破壞。

因此，在兩者上運行相同的腳本（ main.js ）幾乎沒有用-它們具有不同的用途。

---

當前發生的情況是：您的內容腳本在頁面加載時運行一次，並發送一條消息。 此時，大概彈出窗口已關閉，因此您的后台頁面會收到消息並進行回答。 請注意，此時會引發錯誤，因為背景頁面上不存在#title 。 如果您在chrome://extensions打開擴展程序列表並啟用了開發人員模式，則可以看到此信息。

如果您的彈出窗口在內容腳本執行的那一刻完全打開，它也會收到消息並按預期工作。

---

編輯：更好的解決方案

更好的解決方案是保留原始邏輯，但從彈出窗口中以編程方式注入腳本。 為什么會更好？ 從彈出窗口調用腳本時， activeTab會授予您該選項卡的activeTab 。 這意味着所需的可怕權限要少得多。

1）將您的內容腳本放入content.js

// content.js
var pageInfo = {
    'title': document.title,
    'url': window.location.href,
    'summary': window.getSelection().toString()
};

// Send the information back to the extension
chrome.runtime.sendMessage(pageInfo);

2）從清單中刪除content_scripts並調整權限：

"permissions": [ "activeTab" ],

3）在彈出代碼中，注入腳本並收聽消息：

// popup.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    $('#title').val(request.title);
    // ...
  }
);

// Injection defaults to current tab, no need to query
chrome.tabs.executeScript({file: "jquery.min.js"}, function(){
  chrome.tabs.executeScript({file: "content.js"});
});

最終結果：在您單擊按鈕之前，選項卡中沒有權限警告 ，也沒有“雜項代碼”。

注意：使用此解決方案，您根本不需要背景頁面。 在需要之前，只需從清單中刪除"background"鍵即可。