Chrome擴展程序 - 編輯文本字段

Question

我正在嘗試編寫我的第一個Chrome擴展程序。 點擊后，它會自動填寫我大學登錄頁面的ID和密碼字段（其表格的自動填充功能已禁用）。 這是一個非常具體的頁面。

我有一些問題。 我搜索了Google和SO，但無法找到有關如何通過Chrome更改文本字段值的說明。 我知道如何在HTML和JavaScript中執行此操作，但是我無法獲得正確的輸入來修改其文本。

我也嘗試過使用jQuery，我發現了一些例子，但沒有運氣。 我有一個調用JavaScript文件的HTML頁面（popup.html）。 我也嘗試將JS放在內容腳本中

這是manifest.json：

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
      "tabs", "http://*/*"
    ],
    "content_scripts": [
      {
        "matches": ["http://*/*"],
        "js": ["jquery-1.7.2.min.js","content.js"]
      }
  ]
}

我嘗試popup.js之一（從popup.html調用）是：

chrome.tabs.getSelected(null, function(tab) {
    console.log(document)
});

我也嘗試將此代碼放在content.js中。 相同的結果，它打印到控制台，但它打印popup.html內容..

我也直接嘗試（並從上面的方法）通過document.getElementById()直接訪問元素，但仍然沒有運氣..

所以，誰能告訴我我做錯了什么？

Answer 1

您需要使用“web_accessible_resources”屬性將JavaScript文件注入頁面。 看這里：

的manifest.json

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
      "tabs", "http://*/*"
    ],
    "content_scripts": [
      {
        "matches": ["http://*/*"],
        "js": ["jquery-1.7.2.min.js","content.js"],
        "run_at": "document_start"
      }
  ],
  "web_accessible_resources": ["inject.js"]
}

inject.js

(function () {
    console.log('test');
}());

content.js

(function (chrome) {
    var js = document.createElement('script');
    js.type = 'text/javascript';
    js.src = chrome.extension.getURL('inject.js');
    document.getElementsByTagName('head')[0].appendChild(js);
}(chrome));

然后只需要在inject.js中使用您想要使用的JavaScript代碼來操作頁面。 請務必更改匹配項以匹配您大學的登錄頁面。

這種情況的原因是，無論您使用哪個網站，Chrome擴展程序都可以自行運行和運行。 他們可以在切換頁面時繼續處理。 他們在自己的沙盒環境中。

Answer 2

我認為你應該使用在登錄頁面上執行的簡單內容腳本。 您甚至不需要任何瀏覽器操作或彈出窗口。

這是一個清單：

{
    "name": "Fill my password",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Fills my password on University login page",
    "content_scripts": [
        {
            "matches": ["http://www.myuniversity.edu/login.html"],
            "js": ["content.js"]
        }
    ]
}

這是一個內容腳本：

// define your username and password
var myUsername = '...';
var myPassword = '...';

// find the fiends in your login form
var loginField = document.getElementById('...');
var passwordField = document.getElementById('...');

// fill in your username and password
loginField.value = myUsername;
passwordField.value = myPassword;

// if you want, you can even automaticaly submit the login form
var loginForm = document.getElementById('...');
loginForm.submit();

Answer 3

可能的解決方法（chrome擴展）： Autocomplete = on ，但它不能用於某些表單。