用于将用户文本填充到屏幕上的输入字段的 Chrome 扩展

【问题标题】：Chrome extension to populate a user text to an input field on screen用于将用户文本填充到屏幕上的输入字段的 Chrome 扩展
【发布时间】：2019-09-24 13:40:42
【问题描述】：

我想改进我的 chrome 扩展，以便它会打开一个带有输入文本字段的小菜单，用户可以输入他想要的文本，并将输入的文本填充到屏幕上的特定字段。

它现在的工作方式是为了更改所需的文本，我需要手动更改 js 代码，更新所需的文本并从浏览器设置菜单刷新扩展。

与此扩展类似，但只有一个输入字段example

感谢您的帮助！ 罗伊

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

【问题讨论】：

  • 您可以将值存储在 chrome.storage.local 并在您的内容脚本中读取。
  • @wOxxOm 你能帮我写代码吗？

标签： javascript google-chrome google-chrome-extension


【解决方案1】：

您可以通过这种方式使用浏览器本地存储来存储值

 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;
         }

      });
  });
}

【讨论】：

  • 谢谢，@Sim1-81 但我可能没有正确解释自己。我更新了 HTML，以便可以引用正确的元素。我需要在点击“使用初始”btn 时保存该函数 - 用户输入到扩展 HTML 上的 Input 元素 (id="Initials") 的输入。保存初始值后，在主 HTML（用户正在访问的网站）上用“DeveloperName”ID 填写每个输入元素。再次感谢您的帮助！ imgbbb.com/images/2019/09/25/Capture.png
  • @Roy 如果你想操作 chrome 标签的 DOM，这可能对你有帮助 Google Chrome Extension Manipulate DOM of Open or Current tab
  • 我试过但没有任何进展。我什至无法让 console.log 打印值。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-21
  • 2019-07-09
  • 1970-01-01
  • 2013-06-18
  • 2018-04-19
  • 2013-04-29
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode