Расширение Chrome для заполнения пользовательского текста в поле ввода на экране - PullRequest
Новая
       10

Расширение Chrome для заполнения пользовательского текста в поле ввода на экране

0 голосов
/ 24 сентября 2019

Я хочу уточнить свое расширение Chrome, чтобы оно открыло небольшое меню с полем для ввода текста, в котором пользователь может ввести желаемый текст, и оно заполнит введенный текст в определенном поле на экране.

Теперь он работает для того, чтобы изменить нужный текст, мне нужно вручную изменить код js, обновить нужный текст и обновить расширение из меню настроек браузера.

Аналогично этому расширению, но только с одним полем ввода пример

Спасибо за помощь!Рой

Manifest.Json: 

{
  "name": "RoyDevName",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["script.js"]
    }
  ],
  "browser_action": {
    "default_title": "RoyRoz Uptima Dev Name",
    "default_popup": "html.html"

  },
  "permissions": [
  "tabs",
  "storage"
  ]

}

Script.JS: 

var lable = document.getElementById("MasterLabel");
lable.addEventListener("blur", myBlurFunction, true);


function myBlurFunction() {
 var input = document.getElementById('DeveloperName').value;
   var Start = "SVMX_";
   if(!input.startsWith("SVMX_")){
         var lable = Start.concat(input);
        document.getElementById("DeveloperName").value = lable;
   }

}

HTML.html: 

   <!DOCTYPE html>
<html lang="en">
<head>
<style>
body,html{margin:0;padding:0;background-color:#f7f7f7}a{color:#2073d9}#error{margin-bottom:0;display:none}.hideme{display:none}#loading{background-color:#fff;height:100%;left:0;position:absolute;top:0;width:100%;z-index:20000}#loading span{font-size:12px;color:#919191;position:absolute;z-index:20001;left:50%;top:50%;margin-top:-26px;margin-left:-64px;width:128px;display:block;background:url(../images/loading.svg) no-repeat;background-position:center top;padding-top:32px;text-align:center}.busy24{position:absolute;top:5px;background-image:url(../images/loading_24.gif);width:24px;height:24px}.popup-content{width:320px;margin:0 auto;position:relative;background-color:#fff}#header_container{height:52px;background-color:#fff;padding:0 10px 0 10px;border-bottom:1px solid #f0f0f0}#header_container .profile{line-height:52px;max-width:265px;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#header_container .profile .profile-email{font-size:12px;color:#0e71eb;line-height:14px}#header_container .profile .profile-img{height:32px;width:32px;border-radius:50%;margin-right:8px;max-width:50px;overflow:hidden}#header_container .setting{text-align:right;padding-top:18px}#header_container .setting .setting-img{display:inline-block;height:16px;width:16px;background:url(../images/settings_icon.png) 0 0 no-repeat;background-size:32px auto}#header_container .setting .setting-img:hover{background-position:-16px 0}#content_container{text-align:center;background:#fff none}.btn-content{padding:60px 40px}.btn-content>div:first-child{margin-bottom:10px}.btn{padding:13px 0 13px 0}.btn-schedule{width:100%;border:1px solid #0e71eb;border-radius:3px;font-size:13px;color:#fff;line-height:15px;font-weight:600;background:#0e71eb}.btn-schedule:hover,.btn-schedule:focus{background:#0c63ce;border-color:#0c63ce;color:#fff}.btn-startmeeting,.btn-startmeeting>button{width:100%}.alert-danger{margin-bottom:12px;background-color:#ffe6e6;border-color:transparent;font-size:12px;border-radius:3px;line-height:14px;padding:8px 0 8px 14px;color:#eb5a5a;text-align:left}.btn-google-signin{width:100%;border:1px solid #2d8cff;border-radius:3px;font-size:14px;color:#fff;line-height:18px;font-weight:500;background:#2d8cff}.btn-workemail-signin{width:100%;border:1px solid #2d8cff;border-radius:3px;font-size:14px;color:#fff;line-height:20px;font-weight:600;background:#2d8cff;padding:6px 0}.btn-google-signin:hover,.btn-workemail-signin:hover,.btn-google-signin:active,.btn-workemail-signin:active,.btn-google-signin:focus,.btn-workemail-signin:focus{background:#2da5ff;border-color:#2da5ff;color:#fff}.sec-sign .form-group{margin-bottom:12px}.inprogress{pointer-events:none;cursor:not-allowed;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}.btn-signin{width:100%}.btn-switch{width:144px;height:34px;line-height:20px;border-radius:3px;padding:6px 0;font-weight:600;color:#fff!important;background:#2d8cff}.btn-switch:hover,.btn-switch:focus,.btn-switch:active{background:#2da5ff;border-color:#2da5ff;color:#fff}.has-error{color:#ff1e5a;font-size:12px;color:#eb5a5a}.sso-back{padding-top:12px}.sso-back>a{color:#8a8a9e;font-size:12px}#content_container .sec-sign{padding:40px 40px 30px 40px}.sec-sign .sso{padding-top:18px}#login_with_sso{font-size:14px;text-align:center;line-height:16px;color:#2073d9}.action .disabled{background-color:#e4e4ed;line-height:20px;color:#a6a6ba!important}.signin,.continue{position:relative}.signin .disabled{background-color:#e4e4ee;color:#a6a6ba;font-size:14px;font-weight:600;border-color:#e4e4ee}.signin .busy24{right:-30px}.continue .busy24{right:10px}.sec-sign .split-line{margin:32px 0;line-height:1px;border-left:106px solid #e4e4ee;border-right:106px solid #e4e4ee;text-align:center}#sso-form div>h3{line-height:15px;font-size:13px;text-align:center;color:#39394c;margin-bottom:30px;margin-top:0}.manual #domain{padding-right:80px}.manual .suffix{position:absolute;right:13px;top:6px}.sso-type{padding-bottom:48px}.sso-type>a{font-size:12px;line-height:14px}#ssoemail,#domain,#email,#password{padding:10px 13px;font-size:12px;line-height:14px}.dropdown-menu{text-align:center;max-width:inherit;width:100%;padding-bottom:0;padding-top:0;margin-top:0;box-shadow:0 0 0 0 rgba(0,0,0,.15);border:none}.dropdown-menu>li a{display:inline-block;float:left;width:50%;padding-top:10px;padding-bottom:10px;font-weight:400;font-size:12px;color:#333;height:34px;line-height:14px;border-top:1px solid #babacc;border-bottom:1px solid #babacc}.dropdown-menu>li a:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px;border-left:1px solid #babacc;border-right:1px solid #babacc}.dropdown-menu>li a:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #babacc}.dropdown-menu>li a:hover,.dropdown-menu>li a:focus{background-color:#e7f1fd;color:#295ebd;text-decoration:none;border-color:#e7f1fd}.btn-group{padding-bottom:2px}.btn-group button>.drop-icon{float:right;position:absolute;top:10px;right:12px}.btn-group.open button>.drop-icon{color:#2d8cff}.btn-group.open .dropdown-toggle{box-shadow:none}.btn-default{border:1px solid #bfbfbf;border-radius:3px;font-size:13px;color:#666;font-weight:600;line-height:15px}.btn-default:hover,.btn-default:focus,.btn-default.focus,.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{background-color:#fff;border:1px solid #2da5ff}#footer_container{text-align:center;padding-bottom:30px}#footer_container .signout>a{font-size:12px;color:#0e71eb;line-height:14px}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

    </style>


  <meta charset="UTF-8">
  <title>Uptima</title>
   <script src="Script.js" charset="utf-8"> </script>
</head>
<body>
<div class="popup-content" id="content" role="main">
<div id="content_container">
        <div class="sec-sign">
            <div class="sign-pannel">               
                <form class="workemail" id="login-form" action="" autocomplete="off" novalidate="novalidate">
                    <div id="error-msg" class="alert-danger hideme"></div>
                    <div class="form-group">
                        <div class="controls">
                            <label for="Text" class="sr-only">Uptima</label></br></br>
                            <input type="email" id="Initials" name="text" aria-required="true" class="form-control input" autocomplete="off" maxlength="128" placeholder="API Initial" value="">
                            </br></br>
                        </div>
                    </div>

                    <div class="google"><a id="Use_initial" href="" role="button" class="btn btn-google-signin">Use Initial</a></div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

[1]: https://i.stack.imgur.com/tnd66.png

1 Ответ

0 голосов
/ 24 сентября 2019

вы можете использовать локальное хранилище браузера таким образом, чтобы хранить значения 

 chrome.storage.local.set({'option_name': value}, function (data) {
            console.log('setting stored');
        });

и извлекать его с помощью 

chrome.storage.local.get('option_name', function (result) {
        console.log('current value is ' + result.option_name);

})

, примененное к вашему коду должно быть 

function myBlurFunction() {
   var input = document.getElementById('DeveloperName').value;


   var Start = "SVMX_";

   chrome.storage.local.set({'DeveloperName': input }, function (data) {
      console.log('setting stored');

      chrome.storage.local.get('DeveloperName', function (result) {
            console.log('current value is ' + result.DeveloperName);

         if(result.DeveloperName != Start ){

            var lable = Start.concat(result.DeveloperName);
            document.getElementById("DeveloperName").value = lable;
         }

      });
  });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...