크롬 확장 - 텍스트 필드 수정

Question

첫 번째 Chrome 확장 프로그램을 작성하려고합니다. 클릭하면 자동으로 해당 대학의 로그인 페이지 (자동 완성 기능이 비활성화 된 ID)의 ID 및 비밀번호 입력란을 채 웁니다. 매우 구체적인 페이지입니다.

몇 가지 문제점이 있습니다. Google과 SO를 검색했지만 Chrome을 통해 텍스트 필드의 값을 변경하는 방법에 대한 설명을 찾을 수 없습니다. HTML 및 JavaScript에서이 작업을 수행하는 방법을 알고 있지만 텍스트를 수정하기위한 적절한 입력을 얻을 수 없습니다.

jQuery를 사용하여 몇 가지 예제를 사용하여 시도해 보았지만 행운은 없습니다. JavaScript 파일을 호출하는 HTML 페이지 (popup.html)가 있습니다. 가 나는 또한 콘텐츠 스크립트 여기

에 manifest.json을 JS을 것 배치 시도했다 : (popup.html에서 호출되는) popup.js의 내 시도의

{ 
    "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"] 
     } 
    ] 
} 

하나입니다

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

가능한 임시 해결책 (크롬 확장) : Autocomplete = on이지만 일부 양식에서는 작동하지 않습니다.

Answer 3

로그인 페이지에서 실행되는 간단한 콘텐츠 스크립트를 사용해야한다고 생각합니다. 브라우저 액션이나 팝업이 필요하지 않습니다.여기

는 매니페스트의 :

{ 
    "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();