inyectar CSS a un sitio con webview en android

Te doy la bienvenida a nuestra web, en este lugar vas a encontrar la resolución que buscas.

Solución:

No puede inyectar CSS directamente, sin embargo, puede usar Javascript para manipular la página dom.

public class MainActivity extends ActionBarActivity 

  WebView webView;

  @Override
  protected void onCreate(Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);

    webView = new WebView(this);
    setContentView(webView);

    // Enable Javascript
    webView.getSettings().setJavaScriptEnabled(true);

    // Add a WebViewClient
    webView.setWebViewClient(new WebViewClient() 

        @Override
        public void onPageFinished(WebView view, String url) 

            // Inject CSS when page is done loading
            injectCSS();
            super.onPageFinished(view, url);
        
    );

    // Load a webpage
    webView.loadUrl("https://www.google.com");


// Inject CSS method: read style.css from assets folder
// Append stylesheet to document head
private void injectCSS() 
    try 
        InputStream inputStream = getAssets().open("style.css");
        byte[] buffer = new byte[inputStream.available()];
        inputStream.read(buffer);
        inputStream.close();
        String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
        webView.loadUrl("javascript:(function() " +
                "var parent = document.getElementsByTagName('head').item(0);" +
                "var style = document.createElement('style');" +
                "style.type = 'text/css';" +
                // Tell the browser to BASE64-decode the string into your script !!!
                "style.innerHTML = window.atob('" + encoded + "');" +
                "parent.appendChild(style)" +
                ")()");
     catch (Exception e) 
        e.printStackTrace();
    


@Override
public boolean onCreateOptionsMenu(Menu menu) 
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;


@Override
public boolean onOptionsItemSelected(MenuItem item) 
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) 
        return true;
    
    return super.onOptionsItemSelected(item);
  

Pude inyectar css usando “evaluateJavascript” que se agregó a WebView en API 19 https://developer.android.com/reference/android/webkit/WebView

Ejemplo en Kotlin:

private lateinit var webView: WebView

override fun onCreate(savedInstanceState: Bundle?) 

    super.onCreate(savedInstanceState)

    //...

    webView = findViewById(R.id.your_webview_name)

    webView.settings.javaScriptEnabled = true

    webView.webViewClient = object : WebViewClient() 

        override fun onPageFinished(view: WebView, url: String) 

            val css = ".menu_heightheight:35px;.. etc..." //your css as String
            val js = "var style = document.createElement('style'); style.innerHTML = '$css'; document.head.appendChild(style);"
            webView.evaluateJavascript(js,null)
            super.onPageFinished(view, url)
        
    

    webView.loadUrl("https://mywepage.com") //webpage you want to load   

ACTUALIZAR: El código anterior tuvo problemas al aplicar todo el CSS inyectado. Después de consultar con mi desarrollador web, decidimos inyectar el Enlace al archivo CSS en lugar del propio código CSS. Cambié los valores de las variables css y js ->

val css = "https://mywebsite.com/css/custom_app_styles.css"
val js = "var link = document.createElement('link'); link.setAttribute('href','$css'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type','text/css'); document.head.appendChild(link);"

Finalizando este artículo puedes encontrar las aclaraciones de otros desarrolladores, tú también tienes el poder mostrar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador